Vuex系列状态管理篇

状态管理篇"/>

Vuex系列状态管理篇

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'])