关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用-----mapState

Posted 鱼樱、、

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用-----mapState相关的知识,希望对你有一定的参考价值。

一、通过mapState函数的对象参数来赋值:

<p>{{ count }}</p>
<p>{{ count1 }}</p>
<p>{{ count2 }}<p>
//导入
import { mapState } from ‘vuex‘
export default {
    data() {
        return {
            msg: ‘vuex理解要点‘,
            id: 1
        }
    },
    store,
    //方法二:通过mapState对象来赋值
    computed: mapState({
        //使用箭头函数
        count: state => state.count,
        //传入字符串 ‘count’ 等同于 `state => state.count`
        count1: ‘count‘,
        // 为了能够使用 `this` 获取局部状态,必须使用常规函数
        count2(state) {
            return state.count + this.id
        }
    })
}
三、通过mapState函数的数组参数来赋值
当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。
// 映射 this.count 为 store.state.count
computed:mapState([‘count‘])

 

以上是关于关于mapState和mapMutations和mapGetters 和mapActions辅助函数的用法及作用-----mapState的主要内容,如果未能解决你的问题,请参考以下文章

在 Vuex 中使用带有 mapState、mapMutation 的 get/set Computed 属性

Vuex中的mapState、mapMutations、mapActions、mapGetters的简单理解

使用 Vuex,为啥 mapGetters 不接受与 mapState 相同的语法?

vuex辅助函数以及模块化

vuex辅助函数介绍和使用

vue组件书写规范