快捷導(dǎo)航

使用vuex存儲(chǔ)用戶信息到localStorage的實(shí)例

更新時(shí)間：2019年11月11日 15:46:21 作者：guoxq~

今天小編就為大家分享一篇使用vuex存儲(chǔ)用戶信息到localStorage的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

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、儲(chǔ)存其他狀態(tài)類信息，方式相同。

以上這篇使用vuex存儲(chǔ)用戶信息到localStorage的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue樣式穿透 ::v-deep的具體使用
這篇文章主要介紹了vue樣式穿透 ::v-deep的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-06-06
Vue組件間通信的實(shí)現(xiàn)方法講解
組件是vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互進(jìn)行直接的引用，所以組件間的相互通信是非常重要的
2023-01-01
vue中錨點(diǎn)的三種方法
本文給大家?guī)砹藇ue中錨點(diǎn)的三種方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，感興趣的朋友一起看看吧
2018-07-07
Vue生產(chǎn)環(huán)境調(diào)試的方法步驟
開發(fā)環(huán)境下Vue會(huì)提供很多警告來幫你對(duì)付常見的錯(cuò)誤與陷阱,而在生產(chǎn)環(huán)境下,這些警告語句卻沒有用,反而會(huì)增加應(yīng)用的體積,下面這篇文章主要給大家介紹了關(guān)于Vue生產(chǎn)環(huán)境調(diào)試的方法步驟,需要的朋友可以參考下
2022-04-04
vue-cli3腳手架的配置及使用教程
這Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)。篇文章主要介紹了vue-cli3腳手架的配置以及使用,需要的朋友可以參考下
2018-08-08
vue自定義底部導(dǎo)航欄Tabbar的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue自定義底部導(dǎo)航欄Tabbar的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09
vite+vue3+element-plus項(xiàng)目搭建的方法步驟
因?yàn)関ue3出了一段時(shí)間了，element也出了基于vue3.x版本的element-plus，vite打包聽說很快，嘗試一下，感興趣的可以了解一下
2021-06-06
webStorm?debug?vue項(xiàng)目的兩種方案圖文詳解
WebStorm作為一款功能強(qiáng)大的IDE,提供了豐富的調(diào)試功能和技巧,可以幫助你更高效地開發(fā)和調(diào)試Vue應(yīng)用,這篇文章主要給大家介紹了關(guān)于webStorm?debug?vue項(xiàng)目的兩種方案,需要的朋友可以參考下
2024-07-07
vue使用exif獲取圖片旋轉(zhuǎn)，壓縮的示例代碼
這篇文章主要介紹了vue使用exif獲取圖片旋轉(zhuǎn)，壓縮的示例代碼，幫助大家更好的利用python處理圖片，感興趣的朋友可以了解下
2020-12-12
VUE3頁面div如何點(diǎn)擊改變樣式
這篇文章主要介紹了VUE3頁面div如何點(diǎn)擊改變樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03