绑定关联Vuex getter的计算属性的模板为何不随状态更新？

优先排查点 #

• 检查计算属性get/set方法中使用的id是否一致：get方法调用getter时传参用的是this.id，commit mutation时传的是this.exerciseId，需确认两个值完全相等，否则会出现更新了其他id对应数据、当前id数据无变化的情况。
• 确认designerBucket中存储的exercise对象初始插入时就已定义numSets属性：如果是后续动态追加的属性，即使赋值成功也不会触发响应式更新，插入时需预设numSets: 0的默认值。

根因分析 #

你当前使用的是带参数的高阶getter，这种返回函数形式的getter默认不会被Vue缓存，依赖跟踪容易失效，导致state更新后没有触发计算属性重新执行。

解决方案 #

方案1：新增响应式触发标记（推荐，改造成本最低） #

在Vuex state中新增一个计数器标记，每次更新exercise数据时修改计数器，同时在计算属性中显式引用这个计数器，强制触发计算属性依赖更新。

修改后的Vuex Store代码

import Vue from 'vue'

state: {
  designerBucket: [],
  // 新增响应式计数器，用于触发更新
  designerUpdateVersion: 0
},
getters: {
  getNumSetsForExercise: (state) => (payload) => {
    let numSets = 0
    for (let i = 0; i < state.designerBucket.length; i++) {
      if (state.designerBucket[i].id === payload.id) {
        numSets = state.designerBucket[i].numSets
      }
    }
    return numSets
  }
},
mutations: {
  UPDATE_EXERCISE_SETS(state, payload) {
    state.designerBucket.forEach(exercise => {
       if (exercise.id === payload.id) {
          // 兼容未初始化numSets的情况
          if (!exercise.hasOwnProperty('numSets')) {
            Vue.set(exercise, 'numSets', payload.numSets)
          } else {
            exercise.numSets = payload.numSets
          }
       }
    })
    // 计数器自增，触发所有依赖该值的计算属性更新
    state.designerUpdateVersion++
   }
}

修改后的组件计算属性代码

computed: {
   getNumSets: {
      get() {
        // 显式引用计数器，让Vue跟踪到依赖
        this.$store.state.designer.designerUpdateVersion
        return this.$store.getters['designer/getNumSetsForExercise']({id: this.id, parent: this.parent})
      },
      set(value) {
        this.$store.commit('designer/UPDATE_EXERCISE_SETS', {
                    id: this.exerciseId,
                    parentName: this.parent,
                    numSets: parseInt(value),
                    date: this.date
                })
      }
}

方案2：重构getter为无参数形式 #

如果业务场景允许，将筛选条件id和parent存储到Vuex state中，getter直接从state取筛选条件返回对应值，这种形式的getter会被Vue正常缓存，依赖跟踪不会失效。

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