nuxt.js 中使用vuex-persistedstate的坑

在nuxt应用中，由于是同构项目需要跳页面，导致vuex中状态会消失，为了保持状态同步，引入了vuex-persistedstate。

问题描述：

在 fetch 方法中调用axios获取数据，同步到store，store设置失败

原因：
fetch 是服务端调用的，而vuex-persistedstate的原理是将store中的数据同步到浏览器的storage中，当fetch方法中获取到数据后，更新store成功，但是当前浏览器页面还没初始化完成，storage中的数据并没同步；

当浏览器页面初始化完成后会从storage中读取数据同步vuex的store，导致数据重置，出现没有数据的问题。

注意事项

如果是在客户端发起的请求，使用vuex-persistedstate没有问题，但是如果是服务端发起的请求，使用vuex-persistedstate将无法同步状态

解决办法

利用asyncData方法，需要服务端渲染的在asyncData中发起请求，调用接口,数据不放到vuex中，每次刷新重新获取；

  async asyncData({ store, params, req, res }) {
    let token = '';
    if (req && req.config) {
      token = req.config.token;
    } else {
      token = '';
    }
 
    // 并发获取数据
    const [
       result
    ] = await Promise.all([
      Http.banner({ 'platform': 'pc', 'token': token }),
    ]);

    // all data
    return {
      result: result
    };
  },

当前版本

• "@nuxtjs/axios": "^5.3.6",
• "nuxt": "^2.4.0",
• "vuex-persistedstate": "^2.5.4"