vue.js - Mutation not committing state vuex - Nuxt

Question

I am working on vuex app, on my other page i am committing changes to state its working, but here on this specific page i am getting some data from api and storing it in store but it get stuck in mutation, I am getting all data in mutation payload but its not effecting the changes, Please check the screenshot and code,

I can not create fiddle cuz it works there

Getting Items

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

Action

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

Mutation

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

State

projects: {},

Response

When i click load state or manually commit these changes it gives me this error.

标签： vue.jsvuejs2vue-componentvuexnuxt.js

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
      })
   }
}

getters 和 computed 将帮助您的 vue 应用程序反应