Vuex最简单明了的教程

const state={
          
   
    count:2,
}

2.修饰器：Getter 使用getter会更加方便快捷，简化仓库数据，类似计算属性，让组件取值更加方便

const getters={
          
   
    getCount (state) {
          
   
        return "hello world" +state.count
    }
}

在组件中直接取值的：

export default {
          
   
    mounted() {
          
   
        // 注意不是$store.state了，而是$store.getters
        console.log(this.$store.state.count);
        console.log(this.$store.getters.getCount );
    }
}

这种方式虽然也能取到值，但是不太灵活，建议使用mapGetters去解构到计算属性中，就像使用mapState一样，就可以直接使用this调用了，就像下面这样：

computed: {
          
   
        ...mapState([count]),
        ...mapGetters([getCount ]),//仅仅可以取值，不能直接修改
    },

3.Mutation 唯一可以修改state里面值的地方（只能同步修改）

方式一：（推荐，简单易懂）
const mutations={
          
   
    add(state,payload){
          
    //{vuex仓库，所传的参数}
        state.count += payload.number
    }
}
//组件中添加(就是往vuex中存值)
this.$store.commit("add", {
          
    num: 2 }); //标准写法

方式二：
methods: {
          
      // 注意，mapMutations是解构到methods里面的，而不是计算属性了
        ...mapMutations([add]),
       click(){
          
   
        this.add({
          
    number: 10 }); //小技巧，效果同上
    },

修改store/index.js
const store = new Vuex.Store({
          
   
    state: {
          
   
        count: 0,
    },
    mutations: {
          
   
        countAdd(state, payload) {
          
   
            state.number += payload.number;
        },
    },
    actions: {
          
      
        setNum(content) {
          
     // 第一个参数是content，其值是复制的一份store
            return new Promise(resolve => {
          
     // 我们模拟一个异步操作，1秒后修改number为888
                setTimeout(() => {
          
   
                    content.commit(countAdd, {
          
    number: 888 });
                    resolve();
                }, 1000);
            });
        }
    }
});
//组件中
this.$store.dispatch(setNum);

5.Modules