变异不提交状态 vuex - Nuxt

Question

我正在开发 vuex 应用程序，在我的另一个页面上，我正在提交更改以说明其工作状态，但是在此特定页面上，我从 api 获取一些数据并将其存储在商店中，但它陷入了突变，我正在获取所有数据在变异有效载荷中，但不影响更改，请检查屏幕截图和代码，

我无法创建小提琴因为它在那里工作

获取物品

async getItems () {
   await this.$axios.get(`/api/projects/w/latest/all`)
       .then(response => {
          this.$store.commit('project/UPDATE_PROJECTS', response.data.items)
        });
 }

行动

updateProjectsAction (context, projects) {
    context.commit('UPDATE_PROJECTS', projects)
},

突变

UPDATE_PROJECTS (state, payload ) {
    state.projects = payload
}

状态

projects: {},

回复

当我单击加载状态或手动提交这些更改时，它给了我这个错误。

Answer 1

在获取物品中

this.$store.commit('project/UPDATE_PROJECTS', response.data.items)

你应该把它改成

this.$store.dispatch('project/updateProjectsAction', response.data.items)

在行动中你应该改变

updateProjectsAction ({commit}, projects) {
commit('UPDATE_PROJECTS', projects)},

最后一件事，你应该有从 vuex 获取数据的 getter

getters:{
    getProjects: state =>{
          return state.project
  }
}

在 .vue 中

import 'mapGetters' from 'vuex'
export default {
computed:{
       ...mapGetters({
           projects: project/getProjects
      })
   }
}

getter 和计算将帮助您的 vue 应用程序反应性