Vuex mapGetter的基本使用
Posted leslie1943
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex mapGetter的基本使用相关的知识,希望对你有一定的参考价值。
getter相当于Vuex中的计算属性
- 对
state
做处理再返回 mapGetters
把Store
中的getters
映射到组件中的计算属性中
Store文件
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
export default new Vuex.Store({
state: {
msg: ‘Hello world‘,
count: 0
},
getters: {
reverseMsg(state){
return state.msg.split(‘‘).reverse().join(‘‘)
}
}
mutations: {
},
actions:{
},
modules:{
}
})
vue文件
<template>
<div>
<p>count: {{num}}</p>
<p>msg: {{message}}</p>
<p>Normal-reverseMsg: {{$store.getters.reverseMsg}}</p>
<p>Getter-reverseMsg: {{reverseMsg}}</p>
<p>Rename-msgBeReversed: {{msgBeReversed}}</p>
</div>
</template>
<script>
import { mapState, mapGetters } from ‘vuex‘
export default {
computed:{
/**
相当于
num: state => state.count
message: state => state.msg
*/
...mapState({num: ‘count‘, message: ‘msg‘}),
/**
相当于
reverseMsg: getters.reverseMsg
*/
...mapGetters([‘reverseMsg‘]),
/**
重命名,防止与组件内data数据冲突
相当于
msgBeReversed: getters.reverseMsg
*/
...mapGetters({msgBeReversed: ‘reverseMsg‘})
}
}
</script>
以上是关于Vuex mapGetter的基本使用的主要内容,如果未能解决你的问题,请参考以下文章
使用 Vuex,为啥 mapGetters 不接受与 mapState 相同的语法?
在 Vuex 4 和 Vue 3 中使用 `mapActions` 或 `mapGetters`