突变未提交状态 vuex - Nuxt

Posted 2023-02-23

【中文标题】突变未提交状态 vuex - Nuxt

【英文标题】：Mutation not committing state vuex - Nuxt

【发布时间】：2019-08-17 15:25:08

【问题描述】：

我正在开发 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: ,

回应

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

【参考方案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
      )
   

getters 和 computed 将帮助你的 vue 应用响应

【讨论】：

感谢@DeadToy，但仍然出现相同的错误“无法在未定义、空值或原始值上设置反应属性：未定义”

你的 axios 返回一个数组但在状态项目是对象，更改项目 = []