浅谈Vuex@2.3.0 中的 state 支持函数申明


Posted in Javascript onNovember 22, 2017

vuex 2.3.0 的发布说明: Modules can now declare state using a function - this allows the same module definition to be reused (e.g. multiple times in the same store, or in multiple stores)

假如你 vuex 的模块有多个格式是完全一样的, 这时候就可以把这个模块公共出来, 在 Vuex 实例里引用, 如:

import api from '~api'

const actions = {
  async ['get']({commit, rootState: {route: { path }}}, config = {}) {
    const { data: { code, data } } = await api.post(config.url, config.data)
    if (code === 1001) commit('receive', data)
  }
}

const mutations = {
  ['receive'](state, data) {
    state.data = [].concat(data)
  },
  ['modify'](state, payload) {
    const index = state.data.findIndex(item => item.id === payload.id)
    if (index > -1) {
      state.data.splice(index, 1, payload)
    }
  },
  ['insert'](state, payload) {
    state.data = [payload].concat(state.data)
  },
  ['remove'](state, id) {
    const index = state.data.findIndex(item => item.id === id)
    state.data.splice(index, 1)
  }
}

const getters = {
  ['get'](state) {
    return state.data
  }
}
export const _actions = actions
export const _mutations = mutations
export const _getters = getters
export default {
  namespaced: true,
  actions,
  mutations,
  getters
}
import Vue from 'vue'
import Vuex from 'vuex'

import lists from './general/lists'

Vue.use(Vuex)

export default new Vuex.Store({
  namespaced: true,
  modules: {
    base: {
      namespaced: true,
      modules: {
        app: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
        platform: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
        product: {
          namespaced: true,
          modules: {
            category: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
          }
        },
        keyword: {
          namespaced: true,
          modules: {
            username: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
          }
        },
      }
    },
    buzz: {
      namespaced: true,
      modules: {
        shop: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
      }
    }
})

但是 state 却需要每个单独设置, 如果直接设置在lists里, 会导致 state 对象被引用共享

在 vuex@2.3.0 中, 这个问题将不存在

import api from '~api'

const actions = {
  async ['get']({commit, rootState: {route: { path }}}, config = {}) {
    const { data: { code, data } } = await api.post(config.url, config.data)
    if (code === 1001) commit('receive', data)
  }
}

const mutations = {
  ['receive'](state, data) {
    state.data = [].concat(data)
  },
  ['modify'](state, payload) {
    const index = state.data.findIndex(item => item.id === payload.id)
    if (index > -1) {
      state.data.splice(index, 1, payload)
    }
  },
  ['insert'](state, payload) {
    state.data = [payload].concat(state.data)
  },
  ['remove'](state, id) {
    const index = state.data.findIndex(item => item.id === id)
    state.data.splice(index, 1)
  }
}

const getters = {
  ['get'](state) {
    return state.data
  }
}
export const _actions = actions
export const _mutations = mutations
export const _getters = getters
export default {
  namespaced: true,
  state() {
    return { lists: { data: [], total: 0, current_page: 1 } }
  },
  actions,
  mutations,
  getters
}
import Vue from 'vue'
import Vuex from 'vuex'

import lists from './general/lists'

Vue.use(Vuex)

export default new Vuex.Store({
  namespaced: true,
  modules: {
    base: {
      namespaced: true,
      modules: {
        app: lists,
        platform: lists,
        product: {
          namespaced: true,
          modules: {
            category: lists,
          }
        },
        keyword: {
          namespaced: true,
          modules: {
            username: lists,
          }
        },
      }
    },
    buzz: {
      namespaced: true,
      modules: {
        shop: lists,
      }
    }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
csdn 批量接受好友邀请
Feb 19 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
JS实现颜色梯度与渐变效果完整实例
Dec 30 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
对vuex中store和$store的区别说明
Jul 24 Javascript
JS闭包原理及其使用场景解析
Dec 03 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 #Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 #Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 #Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 #Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
Nov 22 #Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
Nov 22 #Javascript
浅谈Angular 中何时取消订阅
Nov 22 #Javascript
You might like
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
php简单压缩css样式示例
2016/09/22 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
JavaScript中的getTimezoneOffset()方法使用详解
2015/06/10 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
JS实现六位字符密码输入器功能
2016/08/19 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
javascript将list转换成树状结构的实例
2017/09/08 Javascript
Vue2.0设置全局样式(less/sass和css)
2017/11/18 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
JS实现判断有效的数独算法示例
2019/02/25 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
在Django的上下文中设置变量的方法
2015/07/20 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
python实现归并排序算法
2018/11/22 Python
pandas数据处理进阶详解
2019/10/11 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
测量实习生自我鉴定
2013/09/19 职场文书
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
微博营销计划书
2014/01/10 职场文书
融资租赁计划书
2014/04/29 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
文艺演出主持词
2015/07/01 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
改造DE1103三步曲
2022/04/07 无线电
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技