浅谈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 相关文章推荐
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
Angular 应用技巧总结
Sep 14 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
JavaScript数组操作详解
Feb 04 Javascript
jQuery Tree Multiselect使用详解
May 02 jQuery
Angular中点击li标签实现更改颜色的核心代码
Dec 08 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
Vue底层实现原理总结
Feb 17 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
koa2实现登录注册功能的示例代码
Dec 03 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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利用str_replace防注入的方法
2013/11/10 PHP
php利用cookie实现自动登录的方法
2014/12/10 PHP
PHP判断IP并转跳到相应城市分站的方法
2015/03/25 PHP
8个PHP数组面试题
2015/06/23 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
JavaScript小技巧整理
2015/12/30 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
实例讲解React 组件
2020/07/07 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
Python基于pillow判断图片完整性的方法
2016/09/18 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
函授毕业生的自我鉴定
2013/11/26 职场文书
表扬信格式
2014/01/12 职场文书
幼儿园开学家长寄语
2014/01/19 职场文书
企业活动策划方案
2014/06/02 职场文书
劳动竞赛口号
2014/06/16 职场文书
2015元旦节寄语
2014/12/08 职场文书
师德先进个人材料
2014/12/20 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server