vue2中实现购物车中数据的计算以及父、子组件通信

 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) } 
     //eg:购物车中被选中的商品列表数据
     selCartLiat(state){
        return state.cartList.filter(item=>item.isChecked)
      }
      
      
     //eg:选中的商品的总数量,要用到getters中前面计算的数据，所以属性定为(state,getters)
     selCount(state,getters){
       return getters.selCartList.reduce((sum, item) => sum + item.goods_num, 0)
     },
     
     // 选中的总价
    selPrice (state, getters) {
      return getters.selCartList.reduce((sum, item) => sum + item.goods_num * item.goods.goods_price_min, 0).toFixed(2)
    },
    
}

在vuex中的actions中封装一个异步方法，调用接口，获取数据，再调用mutations中的方法将获取到的数据存储在state中。

然后再到对应的组件中的created生命周期函数中触发异步请求，利用this.$store.dispatch('模块名/方法名')，实现一进入页面，就发送请求获取数据。将数据存储在vuex的state中。

再利用

computed:{
  ...mapState('模块名',[数据名])
  }
  

拿到数据，可以在结构中动态渲染。

在组件中想要修改vuex中存储的数据值，要利用this.$store.commit('mutations方法名'，数据值)来实现

然后再到mutations中书写修改方法。