vue项目token的方案

一，首先要知道localStorage有什么作用，为什么要用localStorage

localStorage： 除非手动清除，否则一直存在那里。

如果直接把数据存在localStorage，数据是存放在磁盘上，所以读取很慢

所以搭配然后搭配vuex一起用的话就可以加快每次调用Api读取token的读取速度，提高用户体验

二，也要了解vuex的作用

vuex是一个专为 Vue.js 应用程序开发的状态管理模式。

1.vuex是的数据是存放在内存中的，读取数据会快很多

2.vuex的数据也是双向绑定的

三，实现vuex和localStorage的数据同步的核心思想

1. 改的时候，既要改vuex中的数据，还要改localStorage中的数据

2. vuex中的初始数据，应该从localStorage中读取出来

四，导入vuex并初始化数据

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 定义存储当前用户的登录信息的state  （登录信息是一个包含了token的对象）
    user: null
  },
  mutations: {
    // 定义对存储的登录信息进行修改的mutation
    setUser (state, data) {
      state.user = data
    }
  },
  actions: {
  }
})<