一、Vuex是什么

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二、安装

在项目根目录下执行命令：

npm install vuex --save

修改main.js文件，导入Vuex，关键代码如下：

import Vuex from 'vuex'
Vue.use(Vuex);

三、使用

1. 在项目中的src文件夹下，创建store文件夹，并新建index.js文件，内容如下：

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

Vue.use(Vuex);

// 全局state对象，用于保存所有组件的公共数据（可以理解为一个数据库）
const state={
    user: {
        name: ''
    }
};

// 监听state对象的值的最新状态（计算属性）
const getters={
    getUser(state) {
        return state.user;
    }
};

// 唯一一个可以修改state值的方法（同步执行）
const mutations={
    updataUser(state, user) {
        state.user = user;
    }
};

// 异步执行mutations方法
const actions={
    asyncUpdateUser(context, user) {
        context.commit("updateUser", user)
    }
};

// 暴露接口
export default new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});

2. 在main.js中引用：

import store from './store'

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

3. 在登录函数中的判断登录成功后的区域中插入代码，将后端返回的username储存起来

this.$store.dispatch("asyncUpdateUser", {name: res.data.username}); // res.data.username是经过axios请求后，后端返回的username数据

4. 获取储存的name的值

this.$store.getters.getUser.name;

四、解决刷新后数据清空的问题

问题出现的原因

因为Vue是一个单页面应用，Vuex的状态存储也是一个响应式的，当Vue组件从state里面去读取状态的时候，如果state里面的状态发生变化，相应的组件也能拿到一个变化。但是，存储的数据只在这个页面中，当刷新的时候，数据就会恢复成初始的状态。

解决方案

1. 方法思路

监听页面是否刷新，如果刷新的话，就将数据存到sessionStorage中，然后页面打开之后，判断一下sessionStorage是不是存在state对象，如果存在，那就将其取出，如果不存在，就定义初始值。

2. 在App.vue中，修改代码为：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {},
  mounted() {
    window.addEventListener('unload', this.saveState()); // 监听页面刷新
  },
  methods: {
    saveState() {
      sessionStorage.setItem('state', JSON.stringify(this.$store.state)); // 以json格式的字符串写入sessionStorage中
    }
  }
}
</script>

<style>
</style>

3. 在store/index.js中，将原本的：

// 全局state对象，用于保存所有组件的公共数据（可以理解为一个数据库）
const state={
    user: {
        name: ''
    }
};

修改为：

// 全局state对象，用于保存所有组件的公共数据（可以理解为一个数据库）
const state=sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) : {
    user: {
        name: ''
    }
};