浅谈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 跨域访问问题解决方法
Dec 02 Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
js键盘事件的keyCode
Jul 29 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
vue写一个组件
Apr 09 Javascript
ES6入门教程之let、const的使用方法
Apr 13 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
Vue如何实现组件间通信
May 15 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
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
PHP实现随机生成水印图片功能
2017/03/22 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
Three.js基础学习教程
2017/11/16 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
解决vuecli3.0热更新失效的问题
2018/09/19 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
2020/06/02 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
外企办公室竞聘演讲稿
2013/12/29 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
员工安全承诺书
2014/05/22 职场文书
刘公岛导游词
2015/02/05 职场文书
活动费用申请报告
2015/05/15 职场文书
党员身份证明材料
2015/06/19 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
Python字符串常规操作小结
2022/04/03 Python