使用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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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