vuex詳解

目錄

一、簡介

二、優點

三、使用步驟

1. 安裝Vuex

2. 引用Vuex

3. 建立倉庫Store

四、包含子產品

1. State

2. Getters

3. Mutations

4. Action

5. Modules

五、Vuex最最簡單的項目執行個體

1. 存儲資料

2. 擷取資料

3. store檔案目錄結構

index.js

state.js

mutations.js

actions.js

getters.js

4. 使用store

我們來看看對 Vuex 比較專業的介紹：

Vuex 是一個專為 Vue 開發的應用程式的狀态管理模式，它采用集中式存儲管理應用的所有元件的狀态，并以相應的規則保證狀态以一種可預測的方式發生變化。

簡而言之，Vuex 采用類似全局對象的形式來管理所有元件的公用資料，如果想修改這個全局對象的資料，得按照Vuex提供的方式來修改（不能自己随意用自己的方式來修改）。

Vuex狀态管理跟使用傳統全局變量的不同之處：

Vuex的狀态存儲是響應式的： 就是當你的元件使用到了這個 Vuex 的狀态，一旦它改變了，所有關聯的元件都會自動更新相對應的資料，這樣開發者省事很多。

不能直接修改Vuex的狀态： 如果是個全局對象變量，要修改很容易，但是在 Vuex 中不能這樣做，想修改就得使用 Vuex 提供的唯一途徑：顯示地送出（<code>commint</code>）<code>mutations</code>來實作修改。這樣做的好處就是友善我們跟蹤每一個狀态的變化，在開發過程中調試的時候，非常實用。

要使用 Vuex，我們要建立一個執行個體 <code>store</code>，我們稱之為倉庫，利用這個倉庫 <code>store</code> 來對我們的狀态進行管理。

State：定義了應用狀态的資料結構，可以在這裡設定預設的初始狀态。

Getter：允許元件從 store 中擷取資料，<code>mapGetters</code> 輔助函數僅僅是将 store 中的 <code>getter</code> 映射到局部計算屬性。

Mutation：是唯一更改 store 中狀态的方法，且必須是同步函數。

Action：用于送出 <code>mutation</code>，而不是直接變更狀态，可以包含任意異步操作。

Module：可以将 store 分割成子產品（module）。每個子產品擁有自己的 <code>state</code>、<code>mutation</code>、<code>action</code>、<code>getter</code>、甚至是嵌套子子產品

Vuex的作用類似全局對象，Vuex 使用單一狀态樹，用一個對象State包含了整個應用層級的所有狀态，你可以了解為這些狀态就是一堆全局變量和資料。

假設我們有一個全局狀态 <code>count</code> 的值為 5。那麼，我們就可以将其定義為 <code>state</code> 對象中的 <code>key</code> 和 <code>value</code>，作為全局狀态供我們使用。如下：

可以認為，<code>getters</code> 是store的計算屬性，類似于<code>computed</code>,對state裡的資料進行一些過濾，改造等等

假設我們要在<code>state.count</code>的基礎上派生出一個新的狀态<code>newCount</code>出來，就适合使用我們的 <code>getters</code>

<code>getters</code> 接受 <code>state</code> 作為其第一個參數

在元件中擷取 <code>{{newCount}}</code> 方式：

<code>Vuex</code> 給我們提供修改倉庫 <code>store</code>中的狀态的唯一辦法就是通過送出<code>mutation</code> ，且必須是<code>同步函數</code>

我們在 <code>mutations</code>中定義了一個叫<code>increment</code>的函數，函數體就是我們要進行更改的地方

會接受 <code>state</code>作為第一個參數，第二個是自定義傳參

我們在送出<code>commit</code>時候，第一個參數<code>"increment"</code>,就是對應在 <code>mutations</code>中的<code>increment</code>方法，第二個參數是自定義值。例如：

在元件中擷取 <code>{{count}}</code> 方式：

用于送出 <code>mutation</code>，而不是直接變更狀态，可以包含任意異步操作

隻有通過 <code>action=&gt;mutations=&gt;states</code> ，這個流程進行操作，具體步驟如下：

然後我們就在元件裡這麼調用就可以了

随着項目的複雜度增大，為了友善管理 Vuex，一般會将其按功能分割成不同的子產品(<code>Module</code>)，友善日後管理。每個子產品擁有自己的 <code>state</code>、<code>mutation</code>、<code>action</code>、<code>getter</code> 甚至是嵌套子子產品

<code>moduleA.js</code> / <code>moduleB.js</code> 檔案

由此可知，子產品内部的 state 是局部的，隻屬于子產品本身所有，是以外部必須通過對應的子產品名進行通路。

運用vuex文法糖<code>mapMutations</code>和<code>mapGetters</code>

a.vue 檔案

b.vue 檔案

在 <code>main.js</code> 中引用