Vuex + vuex-persistedstate 数据持久化

会不会遇到过在使用Vuex保存数据时,浏览器一刷新数据就被重置了?

接下来教你一招解决Vuex数据持久化,让你可以放心刷新。

一、安装Vuex

1. 安装Vuex

npm install vuex --save

2. 安装vuex-persistedstate

npm install vuex-persistedstate --save

3. 在 src 下新建一个 store 文件夹,在里面新建一个js文件

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate'
Vue.use(Vuex);

const store = new Vuex.Store({
  //引用vuex-persistedstate对state数据持久化
  plugins: [
    persistedState({ storage: window.sessionStorage })
  ],

  // this.$store.state.***
  state: {
    key1: 'value1',
    key2: 'value2',

  },

  mutations: {
    //删除state this.$store.commit('remover', 'key1');
    remover (state, key) {
      state[key] = '';
    },

    //更新state this.$store.commit('upDate', {key1: 'value3'});
    upDate (state, obj) {
      let key = Object.keys(obj)[0];
      state[key] = obj[key];
    },

    //添加state信息
      addUserInfo (state, obj){
          state.userInfo = obj;
      },
  },

});

export default store

官方不建议直接使用 ==state 就行操作

删除state

this.$store.commit('remover', 'key1');

更新state

this.$store.commit('upDate', {key1: 'value3'});

4. 在main.js里引入store

import Vue from 'vue'
import router from './router'
import App from './App'
import store from './store'; //引入store

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  store, //声明挂载store
  components: { App },
  template: '<App/>'
})
  • 这样当你再刷新浏览器后数据就不会被重置了。
  • 原理就是它在 sessionStorage 保存了一份vuex关联数据,在我们用 commitstate 里的数据操作时 sessionStorage 里的数据也会相应改变,刷新时再从 sessionStorage 里取出数据。
  • 如果你不想把数据存在 sessionStorage 里的话可以把store里的js文件的 window.sessionStorage 改成别的
plugins: [
    persistedState({ storage: window.sessionStorage })
  ],
我来评几句
登录后评论

已发表评论数()

相关站点

热门文章