vuex数据持久化处理
⼤家都知道在使⽤vuex时有⼀个弊端就是，就是⼀旦页⾯刷新，所有之前存储的状态就全部没了，这是因为js代码运⾏在内存中，代码运⾏时所有的变量和函数都是保存在内存中的，刷新的时候以前申请的内存将会被释放，并且js脚本会被重新加载，变量重新赋值。所以在我们使⽤vuex的时候只要⼀刷新数据就没了。如果我们想要持久化保存数据可以使⽤ localStorage 或者sessionStorage 存储在本地，保证刷新后数据不会丢失。
但我们也可以使⽤插件实现刷新后数据不丢失
在这⾥我推荐使⽤这两个插件vuex-persistedstate和vuex-persist
第⼀种，安装vuex-persistedstate：
npm install vuex-persistedstate -S
1.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()],
modules:{}
})
2.使⽤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
})],
modules:{}
})
3.使⽤vuex-persistedstate指定需要持久化的state数据，如下：
import Vue from'vue'
import Vuex from'vuex'
import createPersistedState from"vuex-persistedstate"
Vue.use(Vuex)
const store =new Vuex.Store({
sessionstorage和localstoragemodules:{},
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']
})]
})
npm install vuex-persist -S
在store⽂件夹下⾯的index.js中引⼊
import Vue from'vue'
import Vuex from'vuex'
import VuexPersistence from'vuex-persist'
Vue.use(Vuex)
const dataPersistence =new VuexPersistence({
storage: window.localStorage
})
const store =new Vuex.Store({
modules:{},
plugins:[dataPersistence.plugin]
})
通过以上设置，在各个页⾯之间跳转，如果刷新某个页⾯，数据并不会丢失，依然存在，并且不需要在每个 mutations 中⼿动存取数据

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。