VueJS中如何通过变量动态访问store getters对象属性

点语法访问对象属性时，点后面的内容会被识别为固定的属性名字符串，不会解析为变量。你写的this.$store.getters.addedProducts.anyVariableName实际是在取addedProducts下键名就是anyVariableName的属性，和你之前声明的存储分类slug的变量完全无关，自然拿不到正确值。
之前IDE提示categorySlug从未被使用，是因为你直接写return this.$store.getters.addedProducts.categorySlug时，访问的是固定键categorySlug，如果你声明了存储slug的变量却没在后续逻辑里调用，就会触发这个提示。

JS中访问对象动态属性必须使用方括号[]语法，方括号内部的变量会被解析为实际的属性名：

myValue () {
  const targetCategoryKey = this.$store.getters.categorySlug
  return this.$store.getters.addedProducts[targetCategoryKey]
}

如果你用mapGetters辅助函数映射getter到计算属性，写法逻辑一致：

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['categorySlug', 'addedProducts']),
    myValue () {
      return this.addedProducts[this.categorySlug]
    }
  }
}

容错优化 #

如果store初始化阶段addedProducts可能为空、或者目标分类slug还没加载完成，建议加可选链避免报错：

myValue () {
  const targetCategoryKey = this.$store.getters.categorySlug
  return this.$store.getters.addedProducts?.[targetCategoryKey]
}

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