Vue項目使用localStorage+Vuex保存用戶登錄信息

import axios from 'axios'
const baseURL = 'http://XXX

// 全局的 axios 默認值
axios.defaults.baseURL = baseURL

// 登錄請求
const loginCheck = params => {
 return axios.post('/login', params).then(res => {
 return res.data
 })
}
export { loginCheck }

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

Vue.use(Vuex)

const actions = {}
const mutations = {
 handleUserName: (state, user_name) => {
 state.user_name = user_name
 // 把登錄的用戶的名保存到localStorage中，防止頁面刷新，導致vuex重新啟動，用戶名就成為初始值（初始值為空）的情況
 localStorage.setItem('user_name', user_name)
 }
}
const state = {
 user_name: '' || localStorage.getItem('user_name')
}
// getters 只會依賴 state 中的成員去更新
const getters = {
 userName: (state) => state.user_name
}

const store = new Vuex.Store({
 actions,
 mutations,
 state,
 getters
})
export { store }

methods:{
 login(formName){
 this.$refs[formName].validate((valid) => {
 if (valid) {
 // 調用登錄請求接口
 loginCheck(this.form).then(res=>{
 // console.log(res);
 // 登錄成功,提示成功信息，然后跳轉到首頁，同時將token保存到localstorage中, 將登錄名使用vuex傳遞到Home頁面
 if(res.meta.status === 200){
 // 提示成功信息
 this.$message({
 message: res.meta.msg,
 type: 'success'
 });
 var that = this;
 // 跳轉到首頁
 setTimeout(function(){
 that.$router.push({name:'Home'})
 },1000)
 localStorage.setItem('token',res.data.token)
 // 將登錄名使用vuex傳遞到Home頁面
 this.$store.commit('handleUserName',res.data.username);
 }else{
 // 登錄失敗，就提示錯誤信息
 this.$message({
 message: '登錄失敗,'+res.meta.msg,
 type: 'error'
 });
 }
 })
 } else {
 
 return false;
 }
 });
 }
 }

您好，{{$store.getters.username}}