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 }); //小技巧，效果同上
    },

4.Actions
vuex作者不希望你将异步操作放在Mutations中，所以就给你设置了一个区域，让你放异步操作，这就是Actions，异步的修改vuex里面的值，比如定时器，axios请求等

修改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