vue項(xiàng)目持久化存儲(chǔ)數(shù)據(jù)的實(shí)現(xiàn)代碼
更新時(shí)間：2018年10月01日 10:51:08 作者：水痕01
這篇文章主要介紹了vue項(xiàng)目持久化存儲(chǔ)數(shù)據(jù)的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
方式一、使用localStorage在數(shù)據(jù)存儲(chǔ)
1、要在瀏覽器刷新的時(shí)候重新存儲(chǔ)起來(lái)
if (window.localStorage.getItem(authToken)) {
store.commit(types.SETLOANNUMBER, window.localStorage.getItem('loanNumber'));
}
方式二、使用vue-cookie插件來(lái)做存儲(chǔ)
1、參考地址傳送門
2、安裝包
npm install vue-cookie --save
3、在store中存儲(chǔ)起來(lái)
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;
// 設(shè)置存儲(chǔ)
VueCookie.set('token', token, { expires: '30s' });
}
},
actions: {
}
})
4、在登錄頁(yè)面中設(shè)置到存儲(chǔ)中
import { mapMutations } from 'vuex';
export default {
methods: {
login() {
this.saveToken('123')
},
...mapMutations(['saveToken'])
}
};
方式三、使用vuex-persistedstate插件參考文件
在做大型項(xiàng)目,很多數(shù)據(jù)需要存儲(chǔ)的建議使用這種方式
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
淺析Vue中權(quán)限管理的實(shí)現(xiàn)
在前端開(kāi)發(fā)中,權(quán)限管理是一項(xiàng)至關(guān)重要的任務(wù),本教程將深入探討如何在?Vue.js?項(xiàng)目中實(shí)施權(quán)限管理,并詳細(xì)講解如何實(shí)現(xiàn)到按鈕級(jí)別的細(xì)粒度控制,希望對(duì)大家有所幫助2024-11-11
Vue.js?rules校驗(yàn)規(guī)則舉例詳解
Vue表單校驗(yàn)規(guī)則（rules）是一種用于驗(yàn)證表單數(shù)據(jù)的對(duì)象,它通常用于Vue.js框架中的表單組件中,可以在表單提交前進(jìn)行數(shù)據(jù)驗(yàn)證,這篇文章主要給大家介紹了關(guān)于Vue.js?rules校驗(yàn)規(guī)則的相關(guān)資料,需要的朋友可以參考下2024-02-02
Vue3之Mixin的使用方式(全局,局部,setup內(nèi)部使用)
這篇文章主要介紹了Vue3之Mixin的使用方式(全局,局部,setup內(nèi)部使用),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue Extends 擴(kuò)展選項(xiàng)用法完整實(shí)例
這篇文章主要介紹了Vue Extends 擴(kuò)展選項(xiàng)用法,結(jié)合完整實(shí)例形式分析了Vue Extends 擴(kuò)展選項(xiàng)相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-09-09
vue中使用cookies和crypto-js實(shí)現(xiàn)記住密碼和加密的方法
這篇文章給大家介紹一下關(guān)于vue中使用cookies和crypto-js如何實(shí)現(xiàn)密碼的加密與記住密碼，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你們有所幫助。2018-10-10
在Vue項(xiàng)目中,防止頁(yè)面被縮放和放大示例
今天小編就為大家分享一篇在Vue項(xiàng)目中,防止頁(yè)面被縮放和放大示例，具有很好的參考 價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue?vue-touch移動(dòng)端手勢(shì)詳解
這篇文章主要介紹了vue?vue-touch移動(dòng)端手勢(shì)詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
vue+antd實(shí)現(xiàn)折疊與展開(kāi)組件
這篇文章主要為大家詳細(xì)介紹了vue+antd實(shí)現(xiàn)折疊與展開(kāi)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
element-ui table組件如何使用render屬性的實(shí)現(xiàn)
這篇文章主要介紹了element-ui table組件如何使用render屬性的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue實(shí)現(xiàn)點(diǎn)擊箭頭上下移動(dòng)效果
這篇文章主要介紹了Vue實(shí)現(xiàn)點(diǎn)擊箭頭上下移動(dòng)效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06