Vuex中如何自动计算数组总和？求mutation、方法或计算属性最优方案

对于你的需求，最佳方案是使用Vuex的getter，而非把list_sum存进state里。getter的核心作用就是基于现有state派生出新状态，而且自带缓存机制——只有当依赖的my_list_values发生变化时，才会重新计算总和，性能更优。

修改后的Store代码如下：

export default {
  namespaced: true,
  state: {
    my_list_values: [10,9,10]
  },
  getters: {
    list_sum: (state) => {
      // 用reduce计算数组总和，空数组时返回0避免报错
      return state.my_list_values.reduce((total, num) => total + num, 0)
    }
  }
}

为什么不选其他方式？ #

• Mutation：Mutation是用来修改state的，若把list_sum存在state里，每次my_list_values变化时都要手动调用mutation更新总和，不仅代码冗余，还容易遗漏触发时机（比如数组元素修改、新增/删除时）。
• 方法（actions或组件内方法）：用action或组件内方法计算总和，每次调用都会重新执行计算逻辑，没有缓存，频繁调用会浪费性能；同时把计算逻辑放在组件里，也违背了Vuex集中管理状态的原则。

组件中如何使用该getter？ #

在Vue组件里可以通过两种方式访问：

// 方式1：使用mapGetters辅助函数
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('你的模块名', ['list_sum'])
  }
}

// 方式2：直接通过$store访问
export default {
  computed: {
    listSum() {
      return this.$store.getters['你的模块名/list_sum']
    }
  }
}

内容的提问来源于stack exchange，提问作者user1978109