为了能在任意组件中访问⽤户的登录信息，我们将状态存储在 Vuex 中。

// store/index.js import Vue from ‘vue’ import Vuex from ‘vuex’ Vue.use(Vuex) export default new Vuex.Store({ state: { user: null }, mutations: { }, actions: { }, modules: { } })

声明 mutation ⽤于修改 user 数据，具体内容采⽤ payload ⽅式传⼊。通过 DevTools 查看。 要存储的数据为响应的 data.content，内部为⽤户的相关信息。

// login/index.js methods: { async onSubmit () { try { … // 当登录成功时，记录登录状态，存储到 Vuex 中 this.$store.commit(‘setUser’, data.content) this.$router.push({ name: ‘home’ }) this.$message.success(‘登录成功’) } catch (err) { console.log(‘验证失败’, err) } } }

由于数据为 JSON 格式，为了后期使⽤⽅便，在 mutation setUser 中转换为对象保存。通过 DevTools查看。

mutations: { setUser (state, payload) { state.user = JSON.parse(payload) } }, 通过 Vuex 存储后，组件操作共享状态⼗分⽅便。

下⼀步我们可以将状态通过本地存储⽅式对 user 进⾏数据持久化，避免⻚⾯刷新后状态丢失。

mutations: { setUser (state, payload) { state.user = JSON.parse(payload) // 通过本地存储对 user 进⾏数据持久化 // - 注意，本地存储只能保存字符串 window.localStorage.setItem(‘user’, payload) } },

存储成功后，将 user 的初始值更改为本地存储获取 user 的数据。

需要考虑不存在 user 数据的初始情况

state: { // user: null user: JSON.parse(window.localStorage.getItem(‘user’) || null) },