Vuex的getters、mapGetters、mapState、mapActions与mapMutations的使用

目录

相关文章

Vuex的使用

getters的使用

getters的配置如下，需要定义一个对象，对象中包含着函数，函数具有返回值，然后在创建Vuex.Store的时候传入定义的getters

//准备state用于存储数据
const state = {
    sum:0
}
const getters = {
    bigSum(state){
        return state.sum * 10
    }
}

export default new Vuex.Store({
    ...省略部分代码
    state,
    //传入定义的getters
    getters
})

使用如下

mapGetters的使用

mapGetters其实就是一个映射，将getters中的数据映射到计算属性中，如下，其中mapGetters会根据getter中配置的bigSum生成一个名为bigSum的计算属性

这里我们也可以使用简写形式,也就是把映射中对象形式的配置，改为数组形式

mapState的使用

mapState是将state中的数据进行映射，mapState的使用与mapGetters相似，使用如下

mapActions的使用

mapActions的使用与上面的类似，不过mapActions是配置在methods中

并且配置的名字要与store->index.js中actions里函数的名字一致

//准备actions用于响应组件中的动作
const actions = {
    jia(ctx,value){
        //交给mutations处理
        ctx.commit("JIA",value)
    }
}

mapMutations的使用

与mapActions几乎一样，mapMutations配置的函数可以直接调用mutations配置的函数，使用方法如下：

并且配置的名字要与store->index.js中mutations里函数的名字一致

//准备mutations用于操作数据
const mutations = {
    JIA(state,value){
        //操作数据
        state.sum += value
    }
}