浅谈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 相关文章推荐
jQuery Ajax之$.get()方法和$.post()方法
Oct 12 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
浅谈jQuery中replace()方法
May 13 Javascript
用svg制作富有动态的tooltip
Jul 17 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
js轮播图代码分享
Jul 14 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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使用curl发送json格式数据实例
2013/12/17 PHP
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
微信小程序 转发功能的实现
2017/08/04 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
python通过get,post方式发送http请求和接收http响应的方法
2015/05/26 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python实现抽奖小程序
2020/04/15 Python
python可视化爬虫界面之天气查询
2019/07/03 Python
Python datetime包函数简单介绍
2019/08/28 Python
使用Python脚本zabbix自定义key监控oracle连接状态
2019/08/28 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
css3 实现圆形旋转倒计时
2018/02/24 HTML / CSS
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
super关键字的用法
2012/04/10 面试题
给小学生的新年寄语
2014/04/04 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
民主评议教师党员自我评价
2015/03/04 职场文书
物业接待员岗位职责
2015/04/15 职场文书
清洁工工作总结
2015/08/11 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python