国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專(zhuān)題視頻專(zhuān)題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專(zhuān)題1關(guān)鍵字專(zhuān)題50關(guān)鍵字專(zhuān)題500關(guān)鍵字專(zhuān)題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專(zhuān)題關(guān)鍵字專(zhuān)題tag2tag3文章專(zhuān)題文章專(zhuān)題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專(zhuān)題3
問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步驟詳解

來(lái)源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 19:49:16
文檔

vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步驟詳解

vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步驟詳解:這次給大家?guī)?lái)vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步驟詳解,vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步的注意事項(xiàng)有哪些,下面就是實(shí)戰(zhàn)案例,一起來(lái)看一下。分析:vue無(wú)法監(jiān)聽(tīng)localstorage的變化。localstorage主要用于不同頁(yè)面間傳值,vue適合組件
推薦度:
導(dǎo)讀vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步驟詳解:這次給大家?guī)?lái)vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步驟詳解,vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步的注意事項(xiàng)有哪些,下面就是實(shí)戰(zhàn)案例,一起來(lái)看一下。分析:vue無(wú)法監(jiān)聽(tīng)localstorage的變化。localstorage主要用于不同頁(yè)面間傳值,vue適合組件

這次給大家?guī)?lái)vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步驟詳解,vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步的注意事項(xiàng)有哪些,下面就是實(shí)戰(zhàn)案例,一起來(lái)看一下。

分析:vue無(wú)法監(jiān)聽(tīng)localstorage的變化。localstorage主要用于不同頁(yè)面間傳值,vue適合組件間傳值。對(duì)于組件間共用同一數(shù)據(jù)又想保存住信息或者再頁(yè)面刷新的時(shí)候不丟失數(shù)據(jù)(vuex在頁(yè)面刷新的時(shí)候存儲(chǔ)的值會(huì)丟失,localstorage存儲(chǔ)在本地瀏覽器中),可以采用vuex+localstorage的方式。

關(guān)于vuex和storage的區(qū)別

1.最重要的區(qū)別:vuex存儲(chǔ)在內(nèi)存,localstorage則以文件的方式存儲(chǔ)在本地

2.應(yīng)用場(chǎng)景:vuex用于組件之間的傳值,localstorage則主要用于不同頁(yè)面之間的傳值。

3.永久性:當(dāng)刷新頁(yè)面時(shí)vuex存儲(chǔ)的值會(huì)丟失,localstorage不會(huì)。

注:很多同學(xué)覺(jué)得用localstorage可以代替vuex, 對(duì)于不變的數(shù)據(jù)確實(shí)可以,但是當(dāng)兩個(gè)組件共用一個(gè)數(shù)據(jù)源(對(duì)象或數(shù)組)時(shí),如果其中一個(gè)組件改變了該數(shù)據(jù)源,希望另一個(gè)組件響應(yīng)該變化時(shí),localstorage無(wú)法做到,原因就是區(qū)別1。

關(guān)于vuex參考文檔:http://vuex.vuejs.org/zh-cn/index.html

實(shí)現(xiàn)過(guò)程:以首頁(yè)展示用戶(hù)頭像信息,修改個(gè)人信息在公共組件頭部組件中為例,當(dāng)用戶(hù)修改個(gè)人信息時(shí)首頁(yè)的圖片實(shí)時(shí)變化,如果不對(duì)頭像信息做存儲(chǔ)更新,每次用戶(hù)修改完只有刷新頁(yè)面或者從其他頁(yè)面返回回來(lái)才能看到變化,即新設(shè)置的頭像信息,僅展示核心代碼。

1.首先先定義一個(gè)變量在state中。State負(fù)責(zé)存儲(chǔ)整個(gè)應(yīng)用的狀態(tài)數(shù)據(jù),后期就可以使用this.$store.state直接獲取狀態(tài)。也可以利用vuex提供的mapState輔助函數(shù)將state映射到計(jì)算屬性中去。

const state = {
 imgInfo:null //首頁(yè)頭像信息
}

2.mutations里面存儲(chǔ)localstorage的信息。Mutations可以更改狀態(tài),本質(zhì)就是用來(lái)處理數(shù)據(jù)的函數(shù),其接收唯一參數(shù)值state。定義的mutation必須是同步函數(shù)。this.$store.commit(mutationName)是用來(lái)觸發(fā)一個(gè)mutation的方法,或者使用輔助函數(shù)mapMutations直接將觸發(fā)函數(shù)映射到methods上,這樣就能在元素事件綁定上直接使用了。

export const SETIMGINFO = 'SETIMGINFO'
[SETIMGINFO] (state,info) {
 state.imgInfo=info
 localStorage.setItem('imgInfo',info)
 }

3.getter里面獲取localstorage的信息。有些狀態(tài)需要做二次處理,就可以使用getters。通過(guò)this.$store.getters.valueName對(duì)派生出來(lái)的狀態(tài)進(jìn)行訪問(wèn)?;蛘咧苯邮褂幂o助函數(shù)mapGetters將其映射到本地計(jì)算屬性中去。

getImgInfo(state){
 if(localStorage.getItem('imgInfo')){
 state.imgInfo=localStorage.getItem('imgInfo')
 }
 return state.imgInfo
 }

4.在需要對(duì)storage進(jìn)行操作的頁(yè)面引用mapMutations函數(shù)

import {mapMutations} from 'vuex' //引入mapMutations
 ...mapMutations([ 
 'SETIMGINFO'
 ]),
this.SETIMGINFO(this.imgInfo) 
 //在需要的地方引用 mutations里面定義的方法

5.在需要獲取storage信息的頁(yè)面引用mapGetters輔助函數(shù)

import {mapGetters} from 'vuex'
computed:{
 ...mapGetters([ 
 'getImgInfo'
 ])
 },
watch:{ //動(dòng)態(tài)監(jiān)聽(tīng)state的變化,實(shí)時(shí)改變頁(yè)面的數(shù)據(jù)
 getImgInfo: function(li) { //li就是改變后的state里面的imgInfo
 let vm = this;
 this.imgInfo=li //data聲明一個(gè)變量,在html引用。如果storage的值發(fā)生變化就實(shí)時(shí)刷新變量的值。
 }
 },

6.模板中對(duì)vuex的值的引用

<img :src="imgInfo?imgInfo:info.avatar"> 
//三元不等式,如果state發(fā)生變化有值就賦值給img標(biāo)簽,如果沒(méi)有即剛進(jìn)頁(yè)面就賦值給create生命周期函數(shù)中從接口讀出來(lái)的數(shù)據(jù)

相信看了本文案例你已經(jīng)掌握了方法,更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章!

推薦閱讀:

Node.Js實(shí)現(xiàn)端口重用步驟詳解

Vue.js雙向綁定實(shí)現(xiàn)步驟說(shuō)明

聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步驟詳解

vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步驟詳解:這次給大家?guī)?lái)vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步驟詳解,vuex+localstorage動(dòng)態(tài)監(jiān)聽(tīng)storage步的注意事項(xiàng)有哪些,下面就是實(shí)戰(zhàn)案例,一起來(lái)看一下。分析:vue無(wú)法監(jiān)聽(tīng)localstorage的變化。localstorage主要用于不同頁(yè)面間傳值,vue適合組件
推薦度:
標(biāo)簽: VUE storage local
  • 熱門(mén)焦點(diǎn)

最新推薦

猜你喜歡

熱門(mén)推薦

專(zhuān)題
Top
主站蜘蛛池模板: 亚洲欧美另类色图 | 国产色综合久久无码有码 | 亚洲欧洲在线观看 | 国产精品福利一区二区久久 | 久久久久国产一级毛片高清版 | 日韩精品成人 | 日韩欧美一区二区在线 | 亚洲女人在线 | 国产成人精品.一二区 | 亚欧激情| 国产一区二区三区高清 | 日韩亚洲视频 | 亚洲 国产 日韩 欧美 | 免费国产一区 | 国产一区2区 | 不卡的中文字幕 | 香港经典a毛片免费观看…伊人色综合久久 | 欧美色第一页 | 精品综合一区二区三区 | 又粗又硬又大又深又爽动态图 | 日韩精品第三页 | 欧美不卡在线观看 | 国产精品成人久久久 | 国内精品一区二区 | 国产日韩在线 | 日韩 亚洲 欧美 中文 高清 | 99久久久国产精品免费 | 欧美日韩亚洲一区二区三区在线观看 | 亚洲精品一二区 | 欧美性xxxbbb| 黄色a级毛片 | 国产一区不卡 | 欧美 亚洲 校园 第一页 | 亚洲视频在线观看视频 | 亚洲精品乱码久久久久久 | 国产资源免费 | 欧美日韩国产码高清综合人成 | 亚洲综合在线视频 | 日韩网址 | 全免费a级毛片免费毛视频 热re91久久精品国产91热 | 黄a免费|