最近需求不是很大，整体下项目中需要注意的地方

前言：

在使用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>