2020/10/31、 周六、今天又是奮斗的一天。

@Author：Runsen

寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累， 每天都要加油！！！

今天繼續深入Vuex實現雙父組件數據共享。

文章目錄

• Vuex
• Vuex實現雙父組件數據共享
• 點擊熱門城市改變當前城市
• 將所有需要點擊事件，返回首頁
• Vuex高級使用localStorage （緩存）
• mapActions
• keep-alive優化網頁性能

Vuex

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態。

官方文檔：https://vuex.vuejs.org/zh/

Vuex實現雙父組件數據共享

在很多項目中，存在倉庫數據，單向傳遞到父組件。雙父組件進行數據通信，那么就要引用Vuex。

安裝Vuex：npm install Vuex --save

在main.js入口文件中使用store。

在任何組件都可以引用Vuex中的store數據：this.$store.state.city

點擊熱門城市改變當前城市

將所有需要點擊事件，返回首頁

Vuex高級使用localStorage （緩存）

Vuex高級使用localStorage ，下一次刷新的時候可以不用加載數據。

LocalStorage，它是真正的緩存機制，也就是我們通常說的磁盤緩存，他可以做到在這些場景下數據丟失：

mapActions

mapActions的使用:在使用組件的時候每次都要{{this.$store.state.city}}。

這時候就可以使用輔助函數將他映射為this.methods();

如：導入mapstate,在conputed中直接傳入數組...mapState(['city']), 指的是Vuex中的state中的city。

keep-alive優化網頁性能

當我每一次切換城市選擇頁和首頁都發起了Ajax。因此需要使用keep-alive優化網頁性能。

有時候我們不希望組件被重新渲染影響使用體驗；或者處于性能考慮，避免多次重復渲染降低性能。而是希望組件可以緩存下來,維持當前的狀態。這時候就需要用到keep-alive組件。官網釋義：

<keep-alive>包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和<transition>相似，<keep-alive>是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。

但是當切換不同的城市的時候，是不需要緩存的。需要在home.vue使用鉤子函數activated。

當組件再次重新渲染的的，鉤子函數activated就判斷最后的城市和緩存中的城市是不是相同，再次發起AJax請求。

參考課程：慕課網Vue2.5->2.6->3.0 開發去哪兒網App 從零基礎入門到實戰項目開發

總結

以上是生活随笔為你收集整理的七十二、Vuex实现双父组件数据共享、localStorage、mapActions和keep-alive的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。