使用vuex存儲用戶信息到localStorage的實例
更新時間：2019年11月11日 15:46:21 作者：guoxq~
今天小編就為大家分享一篇使用vuex存儲用戶信息到localStorage的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
1、首先需要裝vuex
npm install vuex -d
2、新建store文件夾，新建index.js， 并引入vue、vuex,代碼如下：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const key = 'user'
const store = new Vuex.Store({
state () {
return {
user: null
}
},
getters: {
getStorage: function (state) {
if (!state.user) {
state.user = JSON.parse(localStorage.getItem(key))
}
return state.user
}
},
mutations: {
$_setStorage (state, value) {
state.user = value
localStorage.setItem(key, JSON.stringify(value))
},
$_removeStorage (state) {
state.user = null
localStorage.removeItem(key)
}
}
})
export default store
3、在main.js中引入store,
import store from './store/index'
new Vue({
el: '#app',
router,
store, // 引入store
components: { App },
template: '<App/>'
})
4、在登錄組件中，如代碼所示：
this.$message({
message: '登錄成功',
type: 'success'
})
this.$store.commit('$_setStorage', {user: this.loginForm.username})
this.$router.push({name: 'Home'})
5、儲存其他狀態(tài)類信息，方式相同。
以上這篇使用vuex存儲用戶信息到localStorage的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue樣式穿透 ::v-deep的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
組件是vue.js最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進行直接的引用，所以組件間的相互通信是非常重要的2023-01-01
本文給大家?guī)砹藇ue中錨點的三種方法，本文通過實例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧2018-07-07
Vue生產(chǎn)環(huán)境調(diào)試的方法步驟
開發(fā)環(huán)境下Vue會提供很多警告來幫你對付常見的錯誤與陷阱,而在生產(chǎn)環(huán)境下,這些警告語句卻沒有用,反而會增加應(yīng)用的體積,下面這篇文章主要給大家介紹了關(guān)于Vue生產(chǎn)環(huán)境調(diào)試的方法步驟,需要的朋友可以參考下2022-04-04
這Vue CLI 是一個基于 Vue.js 進行快速開發(fā)的完整系統(tǒng)。篇文章主要介紹了vue-cli3腳手架的配置以及使用,需要的朋友可以參考下2018-08-08
vue自定義底部導(dǎo)航欄Tabbar的實現(xiàn)代碼
這篇文章主要介紹了vue自定義底部導(dǎo)航欄Tabbar的實現(xiàn)代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
vite+vue3+element-plus項目搭建的方法步驟
因為vue3出了一段時間了，element也出了基于vue3.x版本的element-plus，vite打包聽說很快，嘗試一下，感興趣的可以了解一下2021-06-06
WebStorm作為一款功能強大的IDE,提供了豐富的調(diào)試功能和技巧,可以幫助你更高效地開發(fā)和調(diào)試Vue應(yīng)用,這篇文章主要給大家介紹了關(guān)于webStorm?debug?vue項目的兩種方案,需要的朋友可以參考下2024-07-07
vue使用exif獲取圖片旋轉(zhuǎn)，壓縮的示例代碼
這篇文章主要介紹了vue使用exif獲取圖片旋轉(zhuǎn)，壓縮的示例代碼，幫助大家更好的利用python處理圖片，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了VUE3頁面div如何點擊改變樣式問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03