vue项目持久化存储数据

原创

水痕01 2021-06-15 16:04:26 ©著作权

©著作权归作者所有：来自51CTO博客作者水痕01的原创作品，请联系作者获取转载授权，否则将追究法律责任

方式一、使用`localStorage`在数据存储

1、要在浏览器刷新的时候重新存储起来

if (window.localStorage.getItem(authToken)) {
  store.commit(types.SETLOANNUMBER, window.localStorage.getItem('loanNumber'));
}

方式二、使用`vue-cookie`插件来做存储

1、参考地址传送门
2、安装包
```
npm install vue-cookie --save
```

3、在store中存储起来

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)
var VueCookie = require('vue-cookie');

export default new Vuex.Store({
  state: {
    token: VueCookie.get('token')
  },
  mutations: {
    saveToken(state, token) {
      state.token = token;
      // 设置存储
      VueCookie.set('token', token, { expires: '30s' });
    }
  },
  actions: {

  }
})

4、在登录页面中设置到存储中

import { mapMutations } from 'vuex';
export default {
  methods: {
    login() {
      this.saveToken('123')
    },
    ...mapMutations(['saveToken'])
  }
};