Nuxt JS Vuex设置数据在加载页面时没有实时反映答案

【问题标题】：Nuxt JS Vuex setting data not reflected in real-time when loading pageNuxt JS Vuex设置数据在加载页面时没有实时反映
【发布时间】：2020-12-27 16:52:16
【问题描述】：

在我的 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
  }

}

当我在主页和设置页面之间切换时，状态会更新，但不会实时反映在我的页面中？

我尝试将生命周期挂钩从 mounted 更改为 created 和 beforeCreate，希望它能够提交到商店并在页面加载之前准备好？

【问题讨论】：

标签： javascript vue.js vuex nuxt.js

【解决方案1】：

这是 Vue 中反应性的警告之一。你可以在这里阅读更多信息：https://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);
  }

【讨论】：