Nuxt.js刷新时中间件store为undefined，vuex-persistedstate持久化失效问题

问题根因 #

你遇到的问题本质是SSR模式下的运行环境差异导致：localStorage是仅客户端存在的API，服务端渲染阶段（含服务端中间件运行时）不存在该对象，存储在localStorage里的Vuex数据自然无法被服务侧读取，就会出现中间件、页面访问store数据为空的情况。

具体实现步骤 #

1. 调整vuex-persistedstate插件配置 #

首先在plugins目录下新建persistedstate.js文件，代码如下：

import createPersistedState from 'vuex-persistedstate'

export default ({ store }) => {
  createPersistedState({
    // 可按需配置需要持久化的Vuex模块，减少存储体积
    // paths: ['user', 'appSettings', 'cart']
  })(store)
}

然后在nuxt.config.js中注册插件，指定该插件仅在客户端运行：

export default {
  // 其余配置省略
  plugins: [
    { src: '~/plugins/persistedstate.js', ssr: false }
  ]
}

2. 适配服务侧逻辑 #

由于大体积数据无法存储在Cookie中，需要拆分逻辑适配不同运行环境：

• 服务侧运行的中间件、asyncData/fetch方法仅依赖存储在Cookie中的小体积核心数据（比如用户身份令牌、用户ID等），不要依赖存在localStorage中的大体积非核心数据
• 页面中需要使用localStorage持久化数据的区域，用<client-only>标签包裹，避免服务端渲染时报错
• 依赖持久化store数据的中间件，可通过context.isClient判断运行环境，仅在客户端侧执行对应逻辑：

export default function (context) {
  if (context.isClient) {
    // 这里可以正常访问已经从localStorage恢复的store数据
    const userInfo = context.store.state.user.info
    // 执行你的业务逻辑
  }
}

3. 混合存储优化（可选） #

如果有少量数据需要在服务侧也能访问，可以将这部分小体积数据单独用Cookie存储，其余大体积数据全部存在localStorage中，既不会超出Cookie的4KB体积限制，也能满足服务端渲染的必要数据需求。

效果校验 #

完成上述配置后，页面刷新时客户端的Vuex会自动从localStorage恢复全部持久化数据，所有客户端侧的逻辑都可以正常访问store数据，服务侧逻辑仅依赖Cookie中的核心数据，不会出现数据为空的问题。

内容的提问来源于stack exchange，提问作者Ahmed Haddad