前言：

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

所有状态持久化

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

API 参考 | Vuex

创建 store-cache.js 文件

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

store-cache.js

javascript">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；

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

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

仅持久化某个状态

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

store-cache.js

javascript">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

javascript">export default {state: () => ({active_index: 0,}),mutations: {activeIndex(state, val) {state.active_index = val;},},
};