vuex-modules模块化

vuex-modules模块化

• 新建store/modules/user.js
• 新建store/modules/cart.js
• user.js - 用户模块对象

// 用户模块
const userModule = {
  // 开启命名空间
  // 防止不同模块下的 属性 和 方法 冲突
  namespaced: true,
  state() {
    return {
      name: '',
      token: ''
    }
  },
  mutations: {},
  actions: {},
  getters: {}
}

export default userModule

cart.js - 购物车模块对象

// 购物车模块对象
import axios from 'axios'
const cartModule = {
  // 开启命名空间
  // 防止不同模块下的 属性 和 方法 冲突
  namespaced: true,

 state需要写成函数，返回一个数据对象，跟组件中 data函数 一样
  state() {
    return {
      goodsList: []
    }
  },
  mutations: {
    setGoodsList(state, newList) {
      state.goodsList = newList
    }
  },
  actions: {
    async asyncGetGoodsList(store) {
      const url = `https://www.escook.cn/api/cart`
      // 发送异步请求
      const res = await axios({ url: url });
      store.commit('setGoodsList', res.data.list) // 提交mutation修改state中的数据
    }
  },
  getters: {
    allCount(state) {
      return state.goodsList.reduce((sum, obj) => {
        if (obj.goods_state === true) { // 选中商品才累加数量
          sum += obj.goods_count;
        }
        return sum;
      }, 0)
    },
    allPrice(state) {
      return state.goodsList.reduce((sum, obj) => {
        if (obj.goods_state) {
          sum += obj.goods_count * obj.goods_price
        }
        return sum;
      }, 0)
    }
  }
}
export default cartModule

main.js中导入

import Vue from 'vue'
import Vuex from 'vuex'

//导入模块
import cartModule from './modules/cart'
import userModule from './modules/user'


Vue.use(Vuex)
const store = new Vuex.Store({

   // 总部 (根store)
    strict: true, //开启严格模式,修改state 只能通过mutations,其他方式一律报错
    modules: {
        // 模块名:模块对象
        user: userModule,
        cart: cartModule
    }

})
export default store