获取器是 Vuex 的基础概念

获取器是 Vuex 的基础概念，它们充当存储状态的计算属性。它们提供了一种机制来：

衍生数据: 从原始状态值计算衍生数据。这有助于保持组件的清洁并避免冗余计算。

封装: 将与状态访问相关的复杂逻辑封装在获取器中，提高可维护性和可重用性。

过滤和格式化: 在将状态数据暴露给组件之前对其进行过滤或格式化，确保一致的呈现。

定义获取器:

在您的 Vuex 存储定义中，您将有一个 getters 对象，用于定义获取器函数：

JavaScript

export default new Vuex.Store({

state: {

count: 0,

products: [

{ id: 1, name: 'Product 1', price: 10 },

{ id: 2, name: 'Product 2', price: 20 },

],

},

getters: {

// 获取器函数

doubleCount(state) {

return state.count * 2;

},

totalProductsPrice(state) {

return state.products.reduce((sum, product) => sum + product.price, 0);

},

getProductById: (state) => (productId) => {

return state.products.find(product => product.id === productId);

},

},

// ... 其他存储选项

});

在组件中访问获取器:

您可以使用 Vuex 的状态管理功能在您的 Vue 组件中访问获取器：

注入 $store:

在组件的选项对象中使用 inject 选项注入 $store 实例：

JavaScript

export default {

inject: ['$store'],

computed: {

doubledCount() {

return this.$store.getters.doubleCount;

},

},

};

使用 mapGetters 帮助器:

使用 mapGetters 帮助器函数创建一个计算属性映射，以便直接访问获取器：

JavaScript

import { mapGetters } from 'vuex';

export default {

computed: {

...mapGetters({

doubledCount: 'doubleCount',

totalPrice: 'totalProductsPrice',

}),

},

};

然后，您可以在组件的模板中使用这些计算属性来显示或操作衍生数据：

HTML

获取器的主要优点:

提高组件的可读性: 通过将复杂的 state 访问逻辑保持在获取器中，组件变得更加专注于渲染和用户交互。

集中化的状态逻辑: 获取器提供了一个集中位置来访问和操作状态，从而提高可维护性和一致性。

可测试性: 获取器是纯函数，使其更易于独立于组件进行测试。