本文實例為大家分享了Vue使用localStorage+Vuex保存用戶登錄信息的具體代碼，供大家參考，具體內容如下

api.js

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 }

store.js

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 }

login.vue

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;     }    });  } }

Home.vue

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。