vuex--moudle

前两篇文章介绍了vuex的相关内容，写了相应的demo实例，但是在日常开发工作中，一个项目通常有很多种模块组成，数据相互分离，如果按照前面说的那样操作store，势必造成代码冗余，杂乱，扩展性和修改起来都相当繁琐，那么vuex为了解决这个问题，Vuex允许我们将store分割成模块，这样每个模块拥有自己的state,getter,nutation,action,分别操作各自模块的数据，这样一来就完美的解决了上面的问题；
创建不同模块的应用代码示例：

// 模块A
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
export default {
    state,
    getters,
    mutations,
    actions
}
// 模块B
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}
export default {
    state,
    getters,
    mutations,
    actions
}
// store
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

具体Demo实例代码如下：

// 设置属性
const state = {
    goodsList: []
}
// 获取数据
const getters = {
    // 获取商品列表
    getterGoodsList(state) {
        return state.goodsList;
    },
    // 获取所有商品的总价
    getterGoodsTotalPrice(state) {
        var total = 0
        for (const key in state.goodsList) {
            if (state.goodsList.hasOwnProperty(key)) {
                const element = state.goodsList[key];
                total = total + parseFloat(element.total)
            }
        }
        return total
    }
}
// 改变数据状态
 const mutations = {
    // 将新的商品添加到商品数组
    addGoodsToGoodsList(state, goods) {
        state.goodsList.splice(0, 0, goods);
    },
    // 修改选中商品的数量
    changeGoodsCount(state, payload) {
        state.goodsList.forEach(element => {
            if (element.goodsId == payload.goodsId) {
                element.count = parseInt(element.count) + parseInt(payload.count);
                element.total = parseInt(element.count) * parseFloat(element.price);
            }
        })
    },
    // 根据商品id删除选中的商品
    deleteGoodsToGoodsList(state, item) {
        state.goodsList.splice(state.goodsList.indexOf(item), 1)
    }
}
// 应用mutation 能够解决mutation必须同步执行的限制
// Actions 支持载荷方式和对象方式进行分发
const actions = {
    deleteGoods({commit},item){
        setTimeout(() => {
            commit('deleteGoodsToGoodsList',item)
        }, 2000);
        
    }
}
export default {
    state,
    getters,
    mutations,
    actions
}
// store
import Vue from 'vue'
import Vuex from 'vuex'
import goods from "./moudle/goods"

Vue.use(Vuex)

export const store = new Vuex.Store({
    modules:{
        goods
  //如果有多个moudle依次往下写，很方便扩展
    }
})

上面的代码中也提到了action，在这里也简单说一下：
首先说明一点action不直接变更状态，而是提交到mutation,还是有mutation变更数据状态；其次action可以任意异步操作，解决了mutation只能同步操作的问题；
action的分发是通过store.dispatch方法触发，其方式分为载荷方式和对象方式两种，如下

// 以载荷形式分发
 this.$store.dispatch('deleteGoods',item);
 // 以对象形式进行分发
this.$store.dispatch({
         type: 'deleteGoods',
          item: item
  })

具体代码地址：https://github.com/zzsuyifeng/vuexDemo/tree/moudle