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页面中填充了所说的数组。

一切正常，除非我导航到/ agencies / myAgency并重新加载页面，这给了我以下错误：

无法读取未定义的属性“天气”

好像重新存储我商店中的数据一样。
现在，我知道数据在两次重装之间并不持久，因此我尝试使用vuex-persistedstate来解决问题，但无济于事。

以上所述是我的问题的根源吗？我怎么用NuxtJS解决呢？

Answer 1

是的，在重新加载时，存储中的数据将消失。正确的方法是整个应用程序是否需要数据->在nuxtServerInit操作中加载数据

如果数据需要几页，则只应检查数据是否可用以及是否不可用，请以fetch方法加载。

您也可以尝试使用vuex持久状态，但是它可以有自己的怪癖。 https://github.com/robinvdvleuten/vuex-persistedstate/issues/54#issuecomment-414605839

Answer 2

这样做可以解决您的问题

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;

动态路由上的页面重新加载会清空Vuex商店（NuxtJS）

2 个答案: