VueX数据持久化
解决:Vue刷新时获取不到数据
解决方案:1.本地存储 2.Vuex数据持久化工具插件
本地存储
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state:{
count:sessionStroage.getItem('da')
},
mutations{
eventStroage(state){
sessionStorage.setItem('da',state.count)
}
},
......
})
//组件中使用
{{$store.state.count}}
vuex-persist插件
(1)项目安装:
npm install vuex-persist -s
(2)main.js引入:
import VuexPersistence from "vuex-persist"
(3)创建持久化存储对象;
var vueLocal=new VuexPersistence({
// storage 存储方式 默认的是localStorage存储,可以修改成会话存储(window.sessionStorage)
storage:window.localStorage
})
(4)store中定义
export default new Vuex.Store({
state:{...},
mutations:{...},
actions: { ... },
plugins: [vueLocal.plugin]
})