vuex数据持久化

2021-11-22

vuex数据刷新丢失

由于vuex中数据使储存再内存中的,因此当我们刷新浏览器的时候,会造成数据的丢失

结果的方法有很多种

使用localStorage
使用第三方插件

案例:

vuex:两个模块 home模块和 about模块

page:两个页面 home页面和 page页面

home页面需要数据,再创建的过程种发送网络请求,并储存再vuex对应的模块里

about页面想要拿到home页面的数据,并保证再home页面刷新,home模块的数据不会丢失

1 2	// home.vue 发送网络请求获取数据并储存到对应store模块里 store.dispatch('home/getData')

1 2	// about.vue 获取home模块数据 console.log(store.state.home.data);

问题: 当再about页面刷新后获取不到home页面数据

解决: 使用第三方库实现vuex种的数据持久化(vuex-persistedstate)

1	npm install vuex-persistedstate -S

使用:

//store/index.js
plugins: [
    // 配置vuex持久化插件 key: --> 在localStorage中的Key path --> 要缓存的模块的路径
    createPersistedState({
      key: 'vue-demo',
      paths: ['home', 'admin'],
    }),
  ]

效果:(再localStorage中保存vuex中的数据)