浅谈Vuex

什么是Vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以理解为 Vue 配套的 公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便 整个程序中的任何组件直接获取或修改我们的公共数据；

var store = new Vuex.Store({
    state:{
        count: 0
    },
    // 使用this.$store.commit('add')调用mutations
    mutations: {
        // mutation中的函数参数只能接受除了state额外的一个参数,因为只能传一个,所以大多数使用对象或者数组
        add(state) {
            state.count ++;
        },
        subtract(state){
            state.count --;
        }
    },
    // Action函数接受一个与store实例具有相同方法和属性的context对象,可以调用context.commit提交一个mutation
    // 或者通过context.state 和 context.getters 获取state 和 getter
    // 使用this.$store.dispatch('add')调用action
    actions: {
        add(context){
            console.log(context);
            context.commit('add');
        },
        // 这种写法是es6中的变量解构赋值,此时commit就相当于context.commit
        subtract({ commit }) {
            console.log(commit);
            commit('subtract');
        },
        //  action可以进行异步操作,但是mutation不可以异步
        autoadd({ commit }){
            setTimeout(()=>{
                commit('add');
            },3000);
        }
    },
    getters: {
        // 这里的 getters， 只负责 对外提供数据，不负责 修改数据 
        // 只要 state 中的数据发生变化了，那么，如果 getters 正好也引用了这个数据，那么 就会立即触发 getters 的重新求值；
        optCount(state, getters, rootState, rootGetters){
            console.log(getters, rootGetters);
            return 'count值是: ' + state.count;
        }
    }
})

 

...mapActions([
    'autoadd' //将this.autoadd()映射为this.$store.dispatch('autoadd');
])

...mapActions({
    add: 'autoadd' // 将this.auto()映射为this.$store.dispatch('autoadd');
})


...mapMutations([
    'autoadd' //将this.autoadd()映射为this.$store.commit('autoadd');
])

...mapMutations({
    add: 'autoadd' // 将this.auto()映射为this.$store.commit('autoadd');
})

computed: {
    ...mapState({
        count: state=> state.count
    })
}