动态路由上的页面重新加载清空 Vuex 存储（NuxtJS）答案

【问题标题】：Page reload on a dynamic route empties Vuex store (NuxtJS)动态路由上的页面重新加载清空 Vuex 存储（NuxtJS）
【发布时间】：2018-10-09 07:27:17
【问题描述】：

我的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;

使用fetch方法将所述数组填充到index页面中。

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

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

好像我商店的数据在重新加载时消失了。
现在我知道数据在重新加载之间不会持续存在，所以我尝试使用vuex-persistedstate 来解决我的问题，但无济于事。

问题的根源是我上面所说的吗？我该如何使用NuxtJS 解决它？

【问题讨论】：

您为什么要明确创建商店而不是 Nuxt 模块模式 [nuxtjs.org/guide/vuex-store#modules-mode]?我发现它更干净，即使您只是使用store/index.js，您也可以使用模块模式

标签： vue.js vuex nuxt.js

【解决方案1】：

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

如果数据需要几页，你只需检查数据是否可用，如果不可用，则在fetch方法中加载。

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

【讨论】：

【解决方案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;

【讨论】：