溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue項目持久化存儲數(shù)據(jù)的實現(xiàn)代碼

發(fā)布時間:2020-08-03 17:40:29 來源:網(wǎng)絡 閱讀:2484 作者:dolunbu 欄目:web開發(fā)

方式一、使用localStorage在數(shù)據(jù)存儲

1、要在瀏覽器刷新的時候重新存儲起來

if (window.localStorage.getItem(authToken)) {
store.commit(types.SETLOANNUMBER, window.localStorage.getItem('loanNumber'));
}

方式二、使用vue-cookie插件來做存儲

1、參考地址傳送門

2、安裝包

npm install vue-cookie --save

3、在store中存儲起來

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex)
var VueCookie = require('vue-cookie');

export default new Vuex.Store({
state: {
token: VueCookie.get('token')
},
mutations: {
saveToken(state, token) {
state.token = token;
// 設置存儲
VueCookie.set('token', token, { expires: '30s' });
}
},
actions: {

}
})

4、在登錄頁面中設置到存儲中

import { mapMutations } from 'vuex';
export default {
methods: {
login() {
this.saveToken('123')
},
...mapMutations(['saveToken'])
}
};

方式三、使用vuex-persistedstate插件參考文件

在做大型項目,很多數(shù)據(jù)需要存儲的建議使用這種方式

您可能感興趣的文章:

  • mpvue中配置vuex并持久化到本地Storage圖文教程解析

  • vuex的使用及持久化state的方式詳解

  • weex里Vuex state使用storage持久化詳解

文章同步發(fā)布: https://www.geek-share.com/detail/2756840369.html


向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI