Vuex getters forEach返回单个值而不是多个值

Vuex 是 Vue.js 应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 中的 getters 类似于 Vue 组件中的计算属性，它们用于从 store 的 state 中派生出一些状态。

基础概念

• State: 应用的数据源，存储所有需要集中管理的数据。
• Getters: 从 store 的 state 中派生出一些状态，类似于 Vue 组件中的计算属性。
• Mutations: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
• Actions: 类似于 mutations，不同在于：actions 提交的是 mutations，而不是直接变更状态；actions 可以包含任意异步操作。

问题分析

在 Vuex 中，getters 是用来获取 state 中的数据，并且可以做一些逻辑处理后返回结果。如果你在使用 forEach 方法时只返回了单个值，可能是因为你没有正确地收集所有的返回值。

解决方案

如果你想要从一个数组中获取多个值，你应该使用 map 方法而不是 forEach。forEach 方法本身并不返回值，它只是对数组的每个元素执行一次提供的函数。而 map 方法会创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。

示例代码

假设我们有一个 state，其中包含一个用户列表，我们想要通过一个 getter 获取所有用户的名字。

// store.js
const store = new Vuex.Store({
state: {
users: [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
]
},
getters: {
userNames: (state) => {
// 使用 map 方法来获取所有用户的名字
return state.users.map(user => user.name);
}
}
});

在组件中使用这个 getter：

computed: {
...mapGetters([
'userNames'
])
}

这样，userNames 将会是一个包含所有用户名字的数组。

应用场景

• 当你需要从 store 中的复杂数据结构中提取特定信息时。
• 当你需要对 store 中的数据进行一些转换或过滤时。
• 当你需要在多个组件之间共享某些计算后的数据时。

优势

• 集中管理: 所有的状态都集中在一个地方，便于管理和维护。
• 可预测性: 通过 mutations 来改变状态，使得状态的变化变得可追踪和可预测。
• 复用性: Getters 可以在多个组件之间复用，避免了重复的计算逻辑。

通过上述方法，你可以确保你的 Vuex getters 正确地返回多个值，而不是单个值。