Блог

В моем приложении 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 в надежде, что она будет зафиксирована в хранилище и будет готова до загрузки страницы?

Это одно из предостережений о реактивности в 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);
  }