vue實現(xiàn)收藏功能2018-10-17

先部署好整體的邏輯樣式泻云,點擊收藏變紅心固额,未收藏是灰色

磕谅。將收藏狀態(tài)緩存到localstorage里面私爷,這樣的話,刷新狀態(tài)依然是收藏膊夹。

每個商家的頁面url應(yīng)該是有不同商家的id作為url參數(shù)的衬浑,我們要通過一個方法去拿到url

將方法抽離為公共函數(shù),將url 的參數(shù)部分解析成一個對象放刨,里面包含key:value這樣的值

拿到url參數(shù)的方法:window.location.search

使用正則表達式解析url參數(shù)為對象

拓展屬性的方法: Object.assign()


方法:

1.在一開始獲取seller的時候工秩,通過一個立即執(zhí)行函數(shù)獲取id。

APP.vue

2.定義公共方法urlParse


decodeURIComponent

正則http://tool.oschina.net/uploads/apidocs/jquery/regexp.html


然后再頁面引入之后,使用console.log(queryPrama);

會得到結(jié)果:

就是我們想要的結(jié)果助币。

這樣的話浪听,我們通過函數(shù)將url參數(shù)轉(zhuǎn)換成想要的對象格式,并且將它通過id立即執(zhí)行函數(shù)傳給seller, 就可以通過seller.id得到這個對象了眉菱。

在發(fā)送請求時迹栓,將this.seller.id帶上

在XHR異步請求里,可以查看到

請求的文件自己加上了參數(shù)俭缓。

如果要直接使用seller.id 來獲取id的話克伊,需要使用assign來拓展屬性。


輸出結(jié)果是123123尔崔。說明可以直接使用seller.id取到url的id值了答毫。

。下面開始建立緩存

localstorage要與商品不同的id關(guān)聯(lián)起來才可以季春,不能直接寫洗搂。

建立一個管理數(shù)據(jù)存取的js文件? store.js? 。



使用:

引入這兩個方法


在轉(zhuǎn)換收藏狀態(tài)的函數(shù)下面引入方法儲存狀態(tài)


測試:

如果是第一次收藏之前载弄,沒有創(chuàng)建seller的情況下耘拇,控制臺輸入localStorage發(fā)現(xiàn)__seller__字段長度為1,只有一個warn,而收藏之后宇攻,seller字段長度變?yōu)?惫叛,出現(xiàn)seller字段為


再次刷新頁面,依然保持收藏狀態(tài)逞刷。

而取消收藏之后嘉涌,seller字段為:


key的值變?yōu)閒alse了。

再次刷新依然為未收藏夸浅。

設(shè)置localstroge成功仑最。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市帆喇,隨后出現(xiàn)的幾起案子警医,更是在濱河造成了極大的恐慌,老刑警劉巖坯钦,帶你破解...
    沈念sama閱讀 211,639評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件预皇,死亡現(xiàn)場離奇詭異,居然都是意外死亡婉刀,警方通過查閱死者的電腦和手機吟温,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來路星,“玉大人溯街,你說我怎么就攤上這事诱桂。” “怎么了呈昔?”我有些...
    開封第一講書人閱讀 157,221評論 0 348
  • 文/不壞的土叔 我叫張陵挥等,是天一觀的道長。 經(jīng)常有香客問我堤尾,道長肝劲,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評論 1 283
  • 正文 為了忘掉前任郭宝,我火速辦了婚禮辞槐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘粘室。我一直安慰自己榄檬,他們只是感情好,可當我...
    茶點故事閱讀 65,570評論 6 386
  • 文/花漫 我一把揭開白布衔统。 她就那樣靜靜地躺著鹿榜,像睡著了一般。 火紅的嫁衣襯著肌膚如雪锦爵。 梳的紋絲不亂的頭發(fā)上舱殿,一...
    開封第一講書人閱讀 49,816評論 1 290
  • 那天,我揣著相機與錄音险掀,去河邊找鬼沪袭。 笑死,一個胖子當著我的面吹牛樟氢,可吹牛的內(nèi)容都是我干的冈绊。 我是一名探鬼主播,決...
    沈念sama閱讀 38,957評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼埠啃,長吁一口氣:“原來是場噩夢啊……” “哼焚碌!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起霸妹,我...
    開封第一講書人閱讀 37,718評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎知押,沒想到半個月后叹螟,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡台盯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,511評論 2 327
  • 正文 我和宋清朗相戀三年罢绽,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片静盅。...
    茶點故事閱讀 38,646評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡良价,死狀恐怖寝殴,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情明垢,我是刑警寧澤蚣常,帶...
    沈念sama閱讀 34,322評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站痊银,受9級特大地震影響抵蚊,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜溯革,卻給世界環(huán)境...
    茶點故事閱讀 39,934評論 3 313
  • 文/蒙蒙 一贞绳、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧致稀,春花似錦冈闭、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至臭猜,卻和暖如春躺酒,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蔑歌。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評論 1 266
  • 我被黑心中介騙來泰國打工羹应, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人次屠。 一個月前我還...
    沈念sama閱讀 46,358評論 2 360
  • 正文 我出身青樓园匹,卻偏偏與公主長得像,于是被迫代替她去往敵國和親劫灶。 傳聞我的和親對象是個殘疾皇子裸违,可洞房花燭夜當晚...
    茶點故事閱讀 43,514評論 2 348