nuxt实现vuex持久化

前言：

此处不借助插件实现 store 本地持久化

所有状态持久化

使用 vuex 里面的 replaceState 方法还原 store 的根状态

API 参考 | Vuex

创建 store-cache.js 文件

在 plugins 目录下创建 store-cache.js 文件；

store-cache.js

export default (ctx) => {
  window.addEventListener('beforeunload', () => {
    sessionStorage.setItem('storeCache', JSON.stringify(ctx.store.state))
  })
  let storeCache = sessionStorage.getItem('storeCache')
  if (storeCache) {
    ctx.store.replaceState(JSON.parse(storeCache))
    sessionStorage.clear()
  }
}

配置 nuxt.config.js

在 nuxt.config 里面的 plugins 配置，添加 store-cache.js；

里面的 ssr 代表是否在服务端运行，因为上面代码使用的 sessionStorage 是客户端方法，所以设置为 false；

export default {
  // ...
  plugins: ['@/plugins/element-ui.js', { src: '~/plugins/store-cache.js', ssr: false }],
  // ...
}

重启 nuxt 后，刷新页面 store 就不会丢失了

仅持久化某个状态

修改上面的 store-cache.js 文件即可

store-cache.js

export default (ctx) => {
  window.addEventListener('beforeunload', () => {
    sessionStorage.setItem('storeCache', JSON.stringify(ctx.store.state.products.active_index))
  })
  let storeCache = sessionStorage.getItem('storeCache')
  if (storeCache) {
    ctx.store.commit('products/activeIndex', JSON.parse(storeCache))
    sessionStorage.clear()
  }
}

流程：

1、先把 store 里面的 products.active_index 状态存到 sessionStorage ；

2、获取 sessionStorage ；

3、调用 store 里面的 products/activeIndex 方法，重新赋值；

store/products.js

export default {
  state: () => ({
    active_index: 0,
  }),

  mutations: {
    activeIndex(state, val) {
      state.active_index = val;
    },
  },
};