使用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的土著指令和自定義指令的用法講解 ,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了Vue實現(xiàn)自定義下拉菜單功能,文章先通過實例代碼給大家介紹，后面對用到的知識點總結(jié)，需要的朋友可以參考下2018-07-07
本篇文章給大家詳細(xì)介紹了vue跨域處理問題的方式以及相關(guān)知識點介紹，對此有興趣的朋友學(xué)習(xí)下。2018-02-02
這篇文章主要介紹了Vue中的@blur/@focus事件解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了vue3.0中setup的兩個注意點，本文通過兩種用法給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-10-10
CreateJS是基于HTML5開發(fā)的一套模塊化的庫和工具。這篇文章主要介紹了Vue項目引入CreateJS的方法（親測）,需要的朋友可以參考下2019-05-05
iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例
這篇文章主要為大家介紹了iView UI FORM 動態(tài)添加表單項校驗規(guī)則寫法實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家介紹了Vue3模板引用的操作方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了vue實現(xiàn)在進行增刪改操作后刷新頁面，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了Vue組件公用方法提取mixin實現(xiàn)，多個組件共用一個方法時可以用?mixin?抽取到一個js文件中，作為共用方法，下面一起進入文章了解更多詳細(xì)內(nèi)容吧2022-03-03