最近需求不是很大，整体下项目中需要注意的地方
前言：
在使用vuex store做数据状态储存的时候，页面刷新之后，store数据丢失，导致用户状态、token失效等一系列问题
原因：
JS代码是运行在内存中的，代码运行时的所有变量、函数也都是保存在内存中的。进行刷新页面的操作，以前JS的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想存储就必须存储在外部
解决思路：
在用户登录之后，可以获取当前用户的信息或者登录态，然后在存储store数据的同时，再存储到localStorage中；vuex的变量是响应式的，而localStorage的数据变量不是；当改变vuex变量时；组件是回自动监测到数据的改变，而localStorage不会，除非你去操作localStorage的数据；so...应让vuex中的状态从sessionStorage中得到，这样组件就可以响应式的变化
补充说明：
在客户端存储数据：HTML5提供了2种在客户端存储数据的新方法：localStorage没有时间期限，除非将它移除，sessionStorage即会话，当浏览器关闭时会话结束，有时间期限。
之前，这些都是由cookie完成的，但是cookie不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得cookie速度很慢，而且效率不高。
也可以用ES6的Proxy方式或者用store.subscribe的方式；以上两种方式有利有弊；参考下
代码如下
1）vuex store代码
import Vue from 'vue'
import Vuex from 'vuex'
import Storage from '@/uitl/Storagehandle'
Vue.use(Vuex)
console.log(Storage)
const state = {
//校验token
token: Storage.getItem("token")||"",
//用户信息
userData: Storage.getItem("userData") || {}
}
const mutations ={
//赋值token
tokenFix (state, token) {
Storage.setItem(`token`, token)
state.token = token
},
//赋值用户信息
userDataFix (state, userData) {
Storage.setItem(`userData`, userData)
state.userData = userData
},
}
const actions = {
//提交修token
updatetoken (context,value) {
context.commit('token',value)
},
//提交修改用户信息
updateuserData (context,value) {
context.commit('userData',value)
}
}
const getters = {}
const store = new Vuex.Store({
state,
mutations,
actions,
getters
})
export default store
注：Storagehandle 作用是操作localStorage的一些函数，写长长的一堆比较烦；代码如下：
const lsa = window.localStorage
export default {
getItem(key) {
try {
return JSON.parse(lsa.getItem(key))
} catch (err) {
return null
}
},
setItem(key, val) {
lsa.setItem(key, JSON.stringify(val))
},
clear() {
lsa.clear()
},
keys() {
return lsa.keys()
},
removeItem(key) {
lsa.removeItem(key)
}
}
在vue组件中:
<template>
<div class="header">
<span class="el-dropdown-link">
欢迎，{{user.user_name}}
</span>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
data() {
return {
};
},
created(){
},
computed:{
...mapState({
user:state => state.userData
})
},
methods: {
}
}
</script>
网友评论