Vuex mapState的基本使用
Posted leslie1943
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex mapState的基本使用相关的知识,希望对你有一定的参考价值。
mapState把Store中的state映射到组件中的计算属性
Store文件
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
export default new Vuex.Store({
state: {
msg: ‘Hello world‘,
count: 0
},
mutations:{
},
actions:{
},
modules:{
}
})
vue文件
<template>
<div>
<p>count: {{count}}</p>
<p>msg: {{msg}}</p>
</div>
</template>
<script>
import { mapState } from ‘vuex‘
export default {
computed:{
/**
相当于
count: state => state.count
msg: state=> state.msg
*/
...mapState([‘count‘,‘msg‘])
}
}
</script>
如果vue文件已经存在count
msg
属性使用对象形式生成计算属性
<template>
<div>
<p>count: {{num}}</p>
<p>msg: {{message}}</p>
</div>
</template>
<script>
import { mapState } from ‘vuex‘
export default {
computed:{
/**
相当于
num: state => state.count
message: state=> state.msg
*/
...mapState({num: ‘count‘, message: ‘msg‘})
}
}
</script>
以上是关于Vuex mapState的基本使用的主要内容,如果未能解决你的问题,请参考以下文章
使用 Vuex,为啥 mapGetters 不接受与 mapState 相同的语法?