Vuex 3.6.2中mutations无法通过payload替换state的projects数组如何解决

• 未按Vuex规范触发Mutation：Vuex禁止直接调用mutation定义的方法，必须通过commit接口提交变更，直接调用不会修改store的状态，也无法触发响应式更新。
• 异步操作时机不匹配：如果payload是在异步action中获取的，打印状态的操作早于commit语句的执行时机，拿到的是还没更新的旧值。
• payload传递异常：payload从action传递到mutation的过程中被篡改、为空，或者参数传递顺序错误。

• 修正Mutation触发方式
  无论在组件内还是action内部，都必须通过commit方法触发mutation：

  // action内触发示例
  actions: {
    async getProjectList({ commit }) {
      const { data } = await fetch('/api/projects') // 你的异步请求逻辑
      commit('setProject', data) // 必须通过commit提交变更
    }
  }
  
  // 组件内直接触发示例
  // 选项式API
  this.$store.commit('setProject', 新的projects数组)
  // 组合式API
  import { useStore } from 'vuex'
  const store = useStore()
  store.commit('setProject', 新的projects数组)
  

• 校验参数与执行时机
  在mutation代码中新增打印逻辑，确认传入的payload符合预期：

  mutations: {
   setProject(state,payload) {
    console.log('接收到的payload：', payload) // 确认值不为空、格式正确
    state.projects = payload
   }
  },
  

  异步场景下可等异步逻辑执行完成后再查看状态，也可以直接通过Vue DevTools的Vuex面板查看变更记录，避免手动打印的时机误差。

• 兜底兼容响应式更新
  如果上述排查都没有问题，可以使用Vue2提供的Vue.set方法强制触发响应式更新，覆盖边界情况：

  import Vue from 'vue'
  mutations: {
   setProject(state,payload) {
    Vue.set(state, 'projects', payload)
   }
  }
  

内容的提问来源于stack exchange，提问作者Paul Iverson Cortez