Vuex mapGetter的基本使用

Posted leslie1943

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex mapGetter的基本使用相关的知识,希望对你有一定的参考价值。

getter相当于Vuex中的计算属性

  • state 做处理再返回
  • mapGettersStore 中的 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里mapState,mapGetters使用详解

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

在 Vuex 4 和 Vue 3 中使用 `mapActions` 或 `mapGetters`

使用 Vuex mapGetters 时如何修复 TypeScript 错误?

Vuex 反应式 mapGetter 与传递的参数

手写vuex的mapGetters