vuex存储数据语法

store/modules 分模块管理数据

例如：管理购物车数据

store/modules/cart.js:

export default {
  namespaced:true,
  state(){
   cartList:[]
   },
   
  //mutations中存放用于修改数据的方法
  mutations:{
   setCartList(state,newList){
     state.cartList=newList
   }
 },
 
 //actions中存放异步请求方法，但是修改数据只能利用mutations中的方法‘

actions:{
  async getCartAction(context){
     const res= await 接口方法()
     //如果接口返回的数据中的每一个对象都不包含isChecked被选中属性，则需要遍历数组，给每一个对象都添加isChecked属性
     
     res.data.forEach((item)=>{
       return {
          item.isChecked=true
        }
      })
      
    //然后再调用mutations中的方法进行修改初始数据,利用context.commit('方法名',新数据)  的方式来实现
    
    context.commit('setCartList',res.data)
    
  }
},

//getters中存放计算后的数据
getters:{
   
   //eg:购物车中所有的商品数量
   cartTotal(state){
     return state.cartList.reduce((sum, item) => sum + item.goods_num, 0)
   }
}

}
  

store/index.js:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
    
  },

  mutations: {
  },
  actions: {
  },
  modules: {
  
    cart
  }
})

main.js:

import router from './router'
import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')