变异未提交状态Vuex-Nuxt

Question

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

我无法在其中创建小提琴cuz

获取物品

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获取数据的吸气剂

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

在.vue中

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

获取并计算将有助于您的vue应用程序反应