vuex

this.$store.commit("increment")调用的是vuex中mutation中的increment函数，

this.$store.dispatch("increment")调用的是vuex中actions中的increment函数

**actions**
Actions存在的意义是vuex作者假设你在修改state的时候有异步操作，
//vue文件   获取getters值
methods: {
   async kefu(){
    console.log('旧值---'+this.$store.state.cart.textchange);
    await this.$store.dispatch('cart/setNum',"123")   //123是参数
    console.log('新值---'+this.$store.state.cart.textchange);
    },
}
//vuex文件
const actions={
    setNum(content,postdata){   //postdata:上面的123，content：vuex里面的方法，
        alert(postdata)
        return new Promise((resolve)=>{ 
          setTimeout(()=>{
            content.commit('newtext')        //commit调用mutations里的newtext方法
            resolve()
          },10)
        })
    }
}
const mutations = {
    newtext(state){
        state.textchange = "我已经改变了"
    },
}

**getters**
这就是getters存在的意义。我们可以认为，【getters】是store的计算属性,数据处理，过滤计算
//vue文件   获取getters值
methods: {
    kefu(){
      console.log(this.$store.getters['cart/saleProducts'])
    },
}
//和上面功能一样
computed:{
    ...mapGetters(['cart/saleProducts'])
  },


//vuex文件
const getters={
    saleProducts(state) {
        let saleProducts = state.products.map( product => {
            return {
                name: product.name,
                price: product.price / 2
            }
        })
        return saleProducts;
    },
   
}

mapState、mapGetters、mapMutations、mapActions第一个参数是字符串（命名空间名称），第二个参数是数组（不需要重命名）/对象（需要重命名）。

复制代码
mapXXXs('命名空间名称',['属性名1','属性名2'])

mapXXXs('命名空间名称',{

　　'组件中的新名称1':'Vuex中的原名称1',

　　'组件中的新名称2':'Vuex中的原名称2',

})
复制代码

**state**
//vue文件   获取state值
data() {
        return {
            datalist:[],
        }
    },
   created(){
      this.datalist= this.$store.state.cart.collections
   },
//和上面方法一样
computed: {
        ...mapState({
            collections: function (state) { // 用普通函数this指向vue实例,要注意\
                console.log(state.cart.collections[0].bright)
                return state.cart.collections
            },
        })
    },

**mutations**
页面一个事件 
通过 this.$store.commit的方法这个方法可以传递参数，
调动 mutations里面的CommodityCollection这个方法 改变state里面的一个值
//vue文件   改变state值
当开启 namespaced: true, //开启命名
当开启 namespaced: false, //应该为 mutations方法
  ...mapMutations({
      addCollection: "cart/CommodityCollection"
    }),
    //和上面一样不同写法
    addCollection(list){
      this.$store.commit('cart/CommodityCollection',list)
      console.log(this.$store.state)
    },

 //vuex  模块文件**********************************************
const state = {
    carts: localStorage.getItem('carts') ? JSON.parse(localStorage.getItem('carts')) : [], //购物车列表
    collections: localStorage.getItem('collections') ? JSON.parse(localStorage.getItem('collections')) : [], //收藏列表
}

const mutations = {
    //商品收藏
    CommodityCollection(state,data){
        var collectionsId = state.collections.find(list => {
            return data.id == list.id
        });
        if(collectionsId) {
            Toast('已经收藏过了！')
            return false
        }
        state.collections.push(data)
        localStorage.setItem('collections',JSON.stringify(state.collections));
        Toast('收藏成功')
    },


}

export default {
    namespaced: true, //开启命名
    state,
    mutations
}