變異不提交狀態 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 應用程序反應性