Vuex 學習

安裝指令 ： npm install vuex --save

每一個 Vuex 應用的核心就是 store（倉庫）。“store”基本上就是一個容器，它包含着你的應用中大部分的狀态 (state)

Vuex 文檔：https://vuex.vuejs.org/zh/

一、Vuex 是做什麼的？

1. 官方解釋：

   Vuex 是一個專為 Vue.js 應用程式開發的狀态管理模式

2. 通俗解釋：

   把需要多個元件共享的變量全部存儲在一個對象裡面。然後，将這個對象放在頂層的Vue執行個體中，讓其他元件可以使用。為了保證屬性做到響應式，是以 Vue.js 就給我們提供了一個插件 Vuex (在多個元件間共享狀态的插件)，用來存放那些變量

3. 管理什麼狀态呢？有什麼狀态時需要我們在多個元件間共享的呢？

   如果你做過大型開放，你一定遇到過多個狀态，在多個界面間的共享問題。

   比如使用者的登入狀态、使用者名稱、頭像、地理位置資訊等等。

   比如商品的收藏、購物車中的物品等等。

   這些狀态資訊，我們都可以放在統一的地方，對它進行儲存和管理，而且它們還是響應式的

4. Vuex 狀态管理圖例

   

二、Vuex的基本使用 （使用cli2）

基本流程：

建立一個 store 檔案夾 —> index.js —> 導入Vuex —> 使用 Vuex 插件 —> 建立 Vuex.Store 執行個體對象 store —> export default store 導出 store —> 挂載到 Vue 執行個體中 —> 其他元件通過：

this.$store

擷取 store 對象 —> 通過：

this.$store.state.屬性

的方式來通路狀态 —> 通過

this.$store.commit('mutation中方法')

來修改狀态

三、Vuex 核心概念

1. state (單一狀态樹 存放資料)

   

2. Getters (處理資料) ，類似于計算屬性

   1. 從store中擷取一些state變異後的狀态

      

   2. Getters作為參數和傳遞參數

      getters預設是不能傳遞參數的, 如果希望傳遞參數, 那麼隻能讓getters本身傳回另一個函數.

      

3. mutations （修改資料，裡面必須是同步函數）

   更改 Vuex 的 store 中的狀态的唯一方法是送出 mutation

   1. mutation 是什麼？

      mutation 主要包括倆個部分：

      1. 字元串的事件類型（type）
      2. 一個回調函數（handler）,該回調函數的第一個參數就是state

         

   2. mutation 傳遞參數
      1. 在通過mutation更新資料的時候, 有可能我們希望攜帶一些額外的參數
      2. 參數被稱為是mutation的載荷(Payload)

         

      3. 如果參數有很多，不是一個，這個時候我們以對象的形式傳遞，也就是payload是一個對象

         

   3. mutation的送出風格

      

   4. mutation 響應規則

      1. 什麼是響應式？

         當我們資料發生變化時，界面跟着一起重新整理

      2. Vuex的store中的state是響應式的, 當state中的資料發生改變時, Vue元件會自動更新
      3. 這就要求我們必須遵守一些Vuex對應的規則 什麼規則呢？
         1. 提前在store中初始化好所需的屬性
         2. 當給state中的對象添加新屬性時, 使用下面的方式：
            1. 方式一: 使用Vue.set(obj, ‘newProp’, 123)
            2. 方式二: 用新對象給舊對象重新指派

   5. 使用常量替代Mutation事件的類型

      怎麼做呢？

      1. 我們可以建立一個檔案: mutation-types.js, 并且在其中定義我們的常量.
      2. 定義常量時, 我們可以使用ES2015中的風格, 使用一個常量來作為函數的名稱

         

   6. Mutation同步函數
      1. 通常情況下, Vuex要求我們Mutation中的方法必須是同步方法
      2. 主要的原因是當我們使用devtools時, 可以devtools可以幫助我們捕捉mutation的快照
      3. 但是如果是異步操作, 那麼devtools将不能很好的追蹤這個操作什麼時候會被完成
      4. So, 通常情況下, 不要再mutation中進行異步的操作

4. Actions （接收異步資料）

   1. 在Vuex中 執行一些異步操作 如網絡請求，定時器
   2. Action類似于Mutation, 但是是用來代替Mutation進行異步操作的
   3. Action 類似于 mutation，不同在于 ：
      1. Action 送出的是 mutation，而不是直接變更狀态
      2. Action 可以包含任意異步操作
   4. Action 函數接受一個與 store 執行個體具有相同方法和屬性的 context 對象，是以你可以調用

      context.commit

      送出一個 mutation，或者通過

      context.state

      和

      context.getters

      來擷取 state 和 getters
   5. Action 在元件中分發
      1. 你在元件中使用

         this.$store.dispatch('xxx')

         分發 action

         

      2. 同樣的, 也是支援傳遞payload
      3. 過程圖

         

      4. Action 傳回的 promise (常用于異步操作)
         1. 在Action中, 我們可以将異步操作放在一個Promise中, 并且在成功或者失敗後, 調用對應的resolve（then）或reject （catch）
         2. 代碼

            

5. Modules

   1. Vuex 允許我們将 store 分割成子產品（module）。每個子產品擁有自己的 state、mutation、action、getter、甚至是嵌套子子產品——從上至下進行同樣方式的分割
   2. 全局結構圖

      

      3. 子產品的局部圖

      

四、Vuex 項目結構