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、參考地址傳送門(mén)
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 Object.defineProperty及ProxyVue實(shí)現(xiàn)雙向數(shù)據(jù)綁定
這篇文章主要介紹了Vue Object.defineProperty及ProxyVue實(shí)現(xiàn)雙向數(shù)據(jù)綁定,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
vue3組件庫(kù)Shake抖動(dòng)組件搭建過(guò)程詳解
這篇文章主要為大家介紹了vue3組件庫(kù)Shake抖動(dòng)組件搭建過(guò)程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
基于elementUI實(shí)現(xiàn)圖片預(yù)覽組件的示例代碼
這篇文章主要介紹了基于elementUI實(shí)現(xiàn)圖片預(yù)覽組件的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問(wèn)題的方法
本文主要介紹了Vue-Cli配置代理轉(zhuǎn)發(fā)解決跨域問(wèn)題的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
VUE 實(shí)現(xiàn)動(dòng)態(tài)給對(duì)象增加屬性，并觸發(fā)視圖更新操作示例
這篇文章主要介紹了VUE 實(shí)現(xiàn)動(dòng)態(tài)給對(duì)象增加屬性，并觸發(fā)視圖更新操作,涉及vue.js對(duì)象屬性動(dòng)態(tài)操作及視圖更新相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-11-11
詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子)
這篇文章主要介紹了詳解Vue的鉤子函數(shù)(路由導(dǎo)航守衛(wèi)、keep-alive、生命周期鉤子),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要為大家介紹了Pinia介紹及工作原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
Vue.js中class與style的增強(qiáng)綁定實(shí)現(xiàn)方法
由于Class和Style綁定使用頻繁，字符串拼接麻煩且易錯(cuò)，因此，Vue.js 做了專門(mén)的增強(qiáng)，表達(dá)式結(jié)果的類型除了字符串之外，還可以是對(duì)象或數(shù)組，本文給大家講解Vue.js中class與style的增強(qiáng)綁定知識(shí)，感興趣的朋友一起看看吧2023-04-04
VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法
vue3項(xiàng)目,新增彈框連續(xù)點(diǎn)擊確定按鈕防止多次提交,在按鈕上添加自定義指令,這篇文章主要介紹了VUE3自定義指令防止重復(fù)點(diǎn)擊多次提交的實(shí)現(xiàn)方法,需要的朋友可以參考下2024-08-08
vue2.0里，不再有自帶的過(guò)濾器，需要自己定義過(guò)濾器。下面通過(guò)實(shí)例代碼給大家介紹vue2中filter()的相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-07-07