如何将store中API返回数据赋值给state？commit未定义报错如何解决？

核心错误原因 #

• Vuex 中 getters 的定位是派生state的计算属性，仅用于返回基于state的计算结果，不会内置注入commit方法，也不应该承载异步请求、修改state的逻辑
• 异步请求、触发mutation的操作必须定义在actions中，actions会接收包含commit的上下文对象作为第一个参数

修正后的代码 #

1. 移除getters中的错误代码，新增actions配置 #

// 原getters中的getProducts逻辑删除，新增如下actions配置
export const actions = {
  async getProducts({ commit }) {
    axios.get('/api/products')
      .then(res => {
        const data = res.data
        commit('setProducts', data)
      })
      .catch(err => console.log(err))
  }
}

2. mutations代码无需修改，保持原有写法即可 #

export const mutations = {
  setProducts(state, data) {
    state.products = data
  }
}

3. mounted生命周期中改为dispatch触发action #

// 组件内mounted钩子中调用方式
mounted() {
  // 替换原有调用getter的逻辑，改为dispatch触发action
  this.$store.dispatch('getProducts')
}

额外说明 #

• 如果使用组合式API，可通过useStore拿到store实例后调用store.dispatch('getProducts')触发
• 异步逻辑永远不要放在getters或mutations中：getters只做计算返回，mutations只做同步修改state

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