localstorage本地存储token，vuex刷新数据丢失问题⚡⚡⚡
1.vuex和axios安装，引入，使用
1.1vuexa安装和使用
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里也需要引入进来
store/index.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
}
})main.js里也需要引入进来
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持久化插件(vuex-persistedstate)方法，自动将token和用户信息存储在vuex和localstorage里
回来我们的话题：但是一旦页面刷新，vuex的store的这个数据丢失了？？？
解决方法：需要同时也在localstorage里存储token数据，vuex的state的数据需要从localstorage获取
store/user.js
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
