怎么在Vue項目中利用localStorage和Vuex保存用戶登錄信息？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),相山企業(yè)網(wǎng)站建設(shè),相山品牌網(wǎng)站建設(shè),網(wǎng)站定制,相山網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,相山網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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中，防止頁面刷新，導(dǎo)致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) {
      // 調(diào)用登錄請求接口
      loginCheck(this.form).then(res=>{
      //  console.log(res);
       // 登錄成功,提示成功信息，然后跳轉(zhuǎn)到首頁，同時將token保存到localstorage中, 將登錄名使用vuex傳遞到Home頁面
       if(res.meta.status === 200){
        // 提示成功信息
        this.$message({
          message: res.meta.msg,
          type: 'success'
        });
        var that = this;
        // 跳轉(zhuǎn)到首頁
        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}}

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。