Vuex系列状态管理篇--Vuex（3）之getting

4、Vuex–getters

相当于数据仓库的计算属性

4.1、在根目录下

1. 定义 在文件 getters.js 中直接定义

const getters = {
  appWithVersion: (state) => {
    return `${state.appName}v2.0`
  }
}

export default getters;

2. 使用

this.$store.getters.appWithVersion

使用 vuex 的 mapGetters

import { mapState, mapGetters } from "vuex";

...mapGetters([
     'appWithVersion'
 ])

4.2、在模块下

1、定义

const state = {
  userName: 'pig'
}
const getters = {
  firstLetter: (state) => {
    return state.userName.substr(0, 1)
  }
}

2、使用

使用 vuex 的mapGetters方法

import { mapState, mapGetters } from "vuex";

...mapGetters('user', [  // 要添加模块名
      'firstLetter'
])

也可以使用命名空间的方法

import { createNamespacedHelpers } from 'vuex'
const { mapGetters } = createNamespacedHelpers('user')

 ...mapGetters([
     'firstLetter'
 ])