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]
})