对vuex的state高级用法mapState的详细正解

在看vuex官方文档的时候，发现state的mapState 辅助函数在vue组件中使用的时候，表述还是不够清楚，在网上看了很多文章解释的也不够详细，接下来我发表下我个人看法，帮大家来填坑。

使用 mapState 辅助函数帮助我们生成计算属性

export default new Vuex.Store(

{

state:{

count:1

}

})

 

 

首先要使用mapState，必须在组件中引入 import {mapState} from "vuex"

<template>

<div>

<div>{{count}}</div> <!--取的是state中的count 值是1 -->

<div>{{countAlias}}</div><!--取的是state中的count 值是1 -->

<div>{{countPlusLocalState}}</div><!--取的是state中的count 值+组件中的localCount值是11 -->

</div>

</template>

<script>

import {mapState} from "vuex" //引入mapState

export default {

data(){

return{

localCount:10

}

},

computed: mapState({

count: state => state.count, // 组件内的每一个属性函数都会获得一个默认参数state, 然后通过state 直接获取它的属性更简洁

// 传字符串参数 'count' 等同于 `state => state.count`

countAlias: 'count',//把上面的count值给countAlias

 

// 为了能够使用 `this` 获取局部状态，必须使用常规函数

countPlusLocalState (state) {//state就是store中的

return state.count + this.localCount

},

 

})

 

}

</script>