Перезагрузка страницы по динамическому маршруту очищает магазин Vuex (NuxtJS)

Question

Мои Nuxt страницы упорядочены следующим образом:

pages
  \ agencies
     _agency.vue
  error.vue
  index.vue

Где _agency.vue отображает данные, хранящиеся в моем store, в частности, в моем agencies массиве:

// store/index.js

import Vuex from 'vuex';

const createStore = () =>
  new Vuex.Store({
    state: {
      agencies: []
    },
    mutations: {
      changeAgencies(state, agencies) {
        state.agencies = agencies.sort(
          (agencyA, agencyB) =>
            agencyA.weather.currently.cloudCover - agencyB.weather.currently.cloudCover,
        );
      }          
    }
  });

export default createStore;

Указанный массив заполняется на странице index с использованием метода fetch.

Все работает нормально, за исключением случаев, когда я перехожу в / agency / myAgency и перезагружаю страницу, что приводит к следующей ошибке:

Невозможно прочитать свойство 'weather' из неопределенного

Как будто данные из моего магазина пропали при перезагрузке.
Теперь я знаю, что данные не сохраняются междуперезагружается, поэтому я пытаюсь использовать vuex-persistedstate для решения моей проблемы, но безрезультатно.

Является ли источник моей проблемы тем, о чем я говорил выше?И как я могу решить это с NuxtJS?

Answer 1

сделайте так, тогда ваша проблема решится

npm install vuex-persistedstate

// store/index.js

import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
const createStore = () =>
  new Vuex.Store({
plugins: [createPersistedState()],
    state: {
      agencies: []
    },
    mutations: {
      changeAgencies(state, agencies) {
        state.agencies = agencies.sort(
          (agencyA, agencyB) =>
            agencyA.weather.currently.cloudCover - agencyB.weather.currently.cloudCover,
        );
      }          
    }
  });

export default createStore;

Answer 2

Да, при перезагрузке данные из хранилища исчезнут.Правильный способ будет, если данные необходимы для всего приложения -> загрузить их в nuxtServerInit action

Если данные требуют нескольких страниц, вам просто нужно проверить, доступны ли данные иесли его нет в наличии, загрузите его методом fetch .

Вы также можете попробовать использовать состояние vuex perrsisted, но у него могут быть свои причуды.https://github.com/robinvdvleuten/vuex-persistedstate/issues/54#issuecomment-414605839