方法一：使用插件
1、安装 vuex-persistedstate
npm install vuex-persistedstate --save
2、在store的index.js中，手动引入插件并配置
1）储存全部数据
import createPersistedState from "vuex-persistedstate"
const store =new Vuex.Store({
// ...
plugins: [createPersistedState()] //默认持久化所有state
})
2）储存部分指定数据
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage,
reducer(data) {
return {
myData: data.myData // 设置只储存state中的myData
}
}
})]
方法二：存储到本地localstorage
通过监听页面的刷新操作，即beforeunload前存入本地localStorage,页面加载时再从本地localStorage读取信息
在App.vue中加入下面代码
created(){
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
})
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
