在组合式API中使用Vuex

前面所讲解的 Vuex 结合组件的使用都是在配置式 API 中进行的，主要是通过 this.$store.xx 或者 mapxx 等辅助函数来使用，在组合式 API 的 setup 方法中，也可以使用 Vuex，首先访问 state 和 getters，如示例代码 6-9-1 所示。

const store = Vuex.createStore({
    state: {
        count: 3
    },
    getters: {
        getFormatCount(state) {
            // 对数据进行二次加工
            let str = '物料总价：' + (state.count * 10) + '元'
            return str;
        }
    }
})

const counter = {
    template: '<div>{{count}}, {{formatcount}}</div>',
    setup() {
        const store = Vuex.useStore()
        console.log(store.state.count)
        // 计算属性获取 state
        let count = Vue.computed(() => store.state.count)
        let formatcount = Vue.computed(() => sotre.getters.getFormatCount)

        return {
            count,
            formatcount
        }
    }
}

上面的代码中，由于 setup 方法中无法使用配置式 API 当前实例的上下文对象 this，可以采用 useStore 方法获取 store 对象，从而得到 state 和 getters 的数据，并结合组合式 API 的 computed 方法绑定到计算属性上。

mutation 和 action 也可以在 setup 方法中使用，如示例代码 6-9-2 所示。

const store = Vuex.createStore({
    state: {
        count: 3
    },
    mutations: {
        increment(state,params) {
            state.count = state.count + params.num
        }
    },
    actions: {
        incrementAction(context, params) {
            // 在action中调用mutations
            context.commit('increment',params)
        }
    }
})
const counter = {
    template: '<div>{{ count }}<button @click="increment">增加</button></div>',
    setup(){
        const store = Vuex.useStore()
        let count = Vue.computed(() => store.state.count)
        // 定义方法返回mutation和action的调用
        let increment = ()=> store.commit('increment',{num:4})
        let incrementAction = ()=>store.dispatch('incrementAction',{num:4})
        return {
            count,
            increment,
            incrementAction
        }
    }
}

上面的代码中，单击 “增加” 按钮，就会调用 increment 对应的 mutation，从而修改 state 中的 count 值，而 count 则被绑定到了计算属性上，所以每次单击 count 的值就会更新。