Vuex刷新页面数据丢失（数据持久化）

目录

前提：

一、 存储到localStorage中

二、 存储到sessionStorage中

三、 指定数据持久化

---

前提：

为什么要让vuex数据持久化：

        在使用vuex的时候，会发现刷新页面之后state中存储的数据会被重置，因为刷新浏览器的时候会导致整个页面重新加载，vuex的state也会全部重新加载，所以为了防止这类情况的发生，我们会将vuex中的数据进行本地存储，防止页面刷新丢失vuex中的数据。

一、 存储到localStorage中

首先安装vuex-persistedstate

npm install vuex-persistedstate -S

vuex-persistedstate默认存储到localStorage，使用如下：

 在store文件夹下面的index.js中引入

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
    plugins: [createPersistedState()],
})

二、 存储到sessionStorage中

使用vuex-persistedstate存储到sessionStorage，如下：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
    plugins: [createPersistedState({
        storage: window.sessionStorage
    })],
})

三、 指定数据持久化

使用vuex-persistedstate指定需要持久化的state数据，如下：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
const store = new Vuex.Store({
    plugins: [createPersistedState({
        storage: window.sessionStorage,
        // 方法1：用reducer，这里的val是由store里面的所有state，不加reducer为储存所有，reducer为指定存储
        reducer(val)  {
            return {
                // 只储存state中的name
                keyName: val.name
            }
        }
        // 方法2：用paths,数组里面填模块名，存储指定模块
        // paths: ['Home', 'Order']
    })]
})

 博主水平有限，难免有错。欢迎评论交流