Nuxt JS Vuex設置數據在加載頁面時沒有實時反映

Question

在我的 Nuxt JS 2.9 應用程序中，我使用 Vuex 來保存數據並在我的布局中檢索。 我正在按頁面將數據設置到我的 Vuex 存儲中，它正在工作，但由於某種原因需要我刷新新頁面的頁面以查看我的數據，否則它會顯示舊數據。

例如，在我的主頁上，我正在設置：

mounted () {
  this.$store.commit('toolbar/setToolbar', {
    name: 'Homepage'
  })
}

在我的設置頁面上：

mounted () {
  this.$store.commit('toolbar/setToolbar', {
    name: 'Settings'
  })
}

這將進入我的 Vuex，如下所示：

export const state = () => ({
  toolbarData: [{
    name: 'Homepage'
  }]
})

export const mutations = {

  /*
   * Toolbar data
   */
  setToolbar (state, data) {
    const settings = {
      name: data.name != null ? data.name : ''
    }

    state.toolbarData[0] = settings
  }

}

當我在主頁和設置頁面之間切換時，狀態會更新，但不會實時反映在我的頁面中？

我嘗試將生命周期鈎子從beforeCreate更改為created和mounted ，希望它能夠提交到商店並在頁面加載之前准備好？

Answer 1

這是 Vue 中反應性的警告之一。 你可以在這里閱讀更多關於它的信息： https ://v2.vuejs.org/v2/guide/reactivity.html

為了解決這個問題，您可以替換整個數組：

setToolbar (state, data) {
    const settings = {
      name: data.name != null ? data.name : ''
    }

    state.toolbarData = [settings]
  }

或僅設置您需要設置的內容：

import Vue from 'vue';

etToolbar (state, data) {
    const settings = {
      name: data.name != null ? data.name : ''
    }

    Vue.set(state.toolbarData, 1, settings);
  }