解决vue项目刷新页面后用户名数据丢失

项目场景：

使用vue开发时候遇到的问题：
用户登录后获取用户名，并显示在页面上，刷新页面后会出现用户名数据丢失情况。

---

问题描述

用户登录后获取用户名，并显示在页面上，刷新页面后会出现用户名数据丢失情况。

---

原因分析：

查询资料发现，是刷新页面后VUEX中的store中数据会被清除。vuex中的store是用来存储组件状态的。刷新页面时，vue实例重新加载，store会被重置。所以，一些不应该被重置的数据，应该使用本地存储来进行存储。

---

解决方案：

使用本地存储。
过程（补充了Vuex的简单使用教程）：

安装VUEX

npm install vuex@3 --save

配置VUEX

在src中创建vuex文件夹，在该文件夹中创建store.js文件

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

Vue.use(Vuex)

export default new Vuex.Store({
   
  state: {
   },
  mutations