对vuex的state高级用法mapState的详细正解
在看vuex官方文档的时候,发现state的mapState 辅助函数在vue组件中使用的时候,表述还是不够清楚,在网上看了很多文章解释的也不够详细,接下来我发表下我个人看法,帮大家来填坑。使用 mapState 辅助函数帮助我们生成计算属性export default new Vuex.Store({state:{count:1}}) 首先要使用mapS...
在看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>
更多推荐
所有评论(0)