变异不提交状态 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.

Answer 1

In getting items

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

you should change it to

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

In Action you should change

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

And last thing, you should have getters for getting data from vuex

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

In .vue

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

getters and computed will helps your vue app reactive