localstorage本地存储及token，vuex刷新数据丢失问题⚡⚡⚡

1.vuex和axios安装，引入，使用

1.1vuexa安装和使用

vuex3.x版本的官网安装教程:安装 | Vuex

vuex4.x版本的官网安装教程:安装 | Vuex

npm install vuex --save

2.在src下新建文件夹store,并在文件夹中新建文件index.js,如下:

import Vuex from 'vuex'
// 引入user  模块化modules
import user from '@/store/user'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    // 注册user模块
    user
  }
})

***user.js为了模块化管理：需要在store/index.js里面引入进来。

***整个store模块在main.js里也需要引入进来

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

// 引入user  模块化modules
import user from '@/store/user'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    // 注册user模块
    user
  }
})

 import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入全局样式
import '../src/assets/global.less'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 引入axios
import axios from 'axios'
// 配置axios
axios.defaults.baseURL = 'http://big-event-vue-api-t.itheima.net'
// 将axios挂在到vue原型上
Vue.prototype.$http = axios

// element全局注册所有组件
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1.2axios安装和使用

npm install axios -g

2.将token本地localstorage存储

2.1.1  localstorage
在本地浏览器长期存储，需要手动清除才会消失(清除浏览器缓存或调用js方法清除）

2.2.2  sessionstorage
在本地浏览器存储，但只存在一次会话级（即浏览器关闭再打开就没了）

2.3.3  使用：
localstorage和sessionstorage使用一样，下面的只需要替换就行

// 存：第一个参数为存在本地的名字，即本地容器的名字
localstorage.setItem('token',b)
// 取：只有一个参数，即本地储存容器的名字
localstorage.getItem('token')
// 清除:只有一个参数，即本地储存容器的名字
localstorage.removeItem('token')
//清除所有
localstorage.clear()

2.1  登录状态token判定

在使用axios请求数据时：

//	具体的axios封装就不在这写了
//	请求拦截
axios.interceptors.request.use(config => {
	if (localstorage.getItem('token')) {
		const token = localstorage.getItem('token')	// 这里本地浏览器存了的话就取出来
		config.Token = token	// config.Token 的这Token可自己设置，与后端协商一致即可
	}
	return config
})
// 响应拦截
axios.interceptors.response.use(config => {
	if (config.Token) {
		const token = config.Token
		localstorage.setItem('token',token )
	}
})

2.2 在使用vuex时刷新页面，vuex的数据会重置:

这时就可以结合storage来解决,因为页面刷新必定会刷新最外层的APP.vue，所以这段就写在app.vue好了

created () {
	window.addEventListener('beforeunload'，() => {
	// 不要忘了上面localstorage存数据的特性,用JSON.stringify
		sessionstorage.setItem('vuex',JSON.stringify(this.$store.state))
	})
	if(sessionstorage.getItem('vuex')) {
		this.$store.state = JSON.parse(sessionstorage.getItem('vuex'))
		//	因为感觉在storage看的到vuex不舒服，所以就加上了这步
		sessionstorage.removeItem('vuex')
	}
}

我在自己的项目里用到的方法是最基本的localstorage存储方式：

成功的将token拿到了~ok

3.将token存储Vuex

在login组件里调这个store/user.js的方法：updateToken

vuex插件里token数据拿到了~OK

4.刷新页面vuex数据丢失问题

4.1原因：

vuex存储的数据只是在页面中，相当于全局变量，页面刷新时vuex里的数据会重新初始化，导致数据丢失
vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据会被重新赋值

4.2 解决思路：

将vuex的数据直接保存在浏览器的缓存中（sessionStorage、localStorage、cookie）
页面刷新后再从浏览器中取出

4.3 解决方法一

4.3.1选择合适的浏览器存储

       localStorage – 永久存储在本地，除非主动删除

       sessionStorage – 存储在当前tab页，关闭当前tab页就会消失

       cookie – 根据设置的有效时间来存储，缺点是内存小不能存储大数据且不易读取，会和后台进行交互

注：一般vue会选择sessionStorage，因为一是vue是单页面应用，操作都是在一个页面跳转路由，二是可以保证打开页面时，sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据

4.3.2 把vuex里的数据保存到sessionStorage中

页面刷新的时候，监听浏览器刷新前事件，在浏览器刷新之前就把vuex里的数据保存到sessionStorage中，刷新成功后如果异步请求的数据未返回则直接获取sessionStorage的数据

4.3.3 Vuex持久化插件(vuex-persistedstate)

原理：将vuex的state存在浏览器存储中一份，刷新页面的 一瞬间，vuex数据消失，会去浏览器存储中拿回数据

vuex-persistedstate安装使用方法可以网上查资料：https://blog.csdn.net/weixin_46846007/article/details/131165731

回来我们的话题：但是一旦页面刷新，vuex的store的这个数据丢失了？？？

解决方法：需要同时也在localstorage里存储token数据，vuex的state的数据需要从localstorage获取

 export default {
  namespaced: true,
  state:() => ({
    token:localStorage.getItem('token'),
  }),
  mutations:{

    updateToken (state, token) {
      state.token = token
      // 存入 localStorage
      // localStorage.setItem('token', token)
      localStorage.setItem('token',token)
    },
  },
  actions:{},
  getters:{}
}

数据不会再丢失了~~OK