如何在VueX的computed/methods属性块中使用if/else匹配对应store资源

• 语法层面：computed配置项要求传入对象字面量，你直接在对象内部写if分支不符合JS对象的语法规范，无法被正常解析。
• 执行时机层面：mapGetters这类Vuex辅助函数是在组件初始化的同步阶段执行的，此时组件实例还未创建完成，this并不指向当前组件实例，自然无法拿到props传入的store动态值。

动态获取Vuex Getters #

不用mapGetters辅助函数，手动写computed属性访问对应的命名空间getter即可，此时computed的getter函数执行时组件实例已经初始化完成，可以正常拿到props的store值：

props: {
  store: {
    type: String,
    required: true,
    // 可选：加校验限定合法的store命名空间
    validator: val => ['storeNumber1', 'storeNumber2'].includes(val)
  }
},
computed: {
  thing1() {
    return this.$store.getters[`${this.store}/thing1`]
  },
  thing2() {
    return this.$store.getters[`${this.store}/thing2`]
  }
}

如果需要批量引入大量getter，也可以自己封装工具函数生成computed配置，避免重复代码。

适配Vuex Mutations调用 #

和getters的逻辑一致，直接通过$store.commit拼接动态命名空间调用即可，不用mapMutations辅助函数：

methods: {
  // 单个mutation封装示例
  updateThing1(payload) {
    this.$store.commit(`${this.store}/updateThing1`, payload)
  },
  // 通用封装示例，调用时直接传mutation名和参数即可
  commitStoreMutation(mutationName, payload) {
    this.$store.commit(`${this.store}/${mutationName}`, payload)
  }
}
// 调用示例：this.commitStoreMutation('updateThing2', { id: 1 })

如果需要调用actions，逻辑完全一致，把commit替换为dispatch即可。

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