vue - Vuex

10發表於2022-05-10

今天內容挺多，因為想的是必須在一天內把這個vuex完成，說實話這裡面要記得東西還是蠻多的，主要是分為原生的和簡便方法兩種都是vue官方定義的，只不過看你要用哪種，vuex感覺要是用熟練了不得了，直接可以把vue起飛了，資料到處用，那種起飛的感覺，曾經體驗過，所以這個應該還是可以多練練的。
明天進入vue2中的最後一個內容了，路由，這也是一個一直耳聞但是從沒有見過的東西。

一.理解vuex

1.vuex是什麼

專門在vue中實現集中式狀態（資料）管理的一個Vue外掛，對vue應用中多個元件的共享狀態進行集中式的管理（讀/寫），也是一種元件間通訊的方式，且適用於任意元件間的通訊

我們以前要實現各個元件間通訊，是不是全域性事件匯流排，我們以前都是拿來讀這個資料然後對他進行操作，其實沒有考慮到寫去改這個資料，如果要改A裡面的資料，那麼A就要繫結一個自定義事件，接受別個元件發回來的資料，然後在A裡面修改，vuex我個人而言哈還是挺方便的，但卻是看起來這張圖有點複雜了

vuex來實現，他不屬於任何一個元件，就連app都不是，它是外掛所以是註冊在入口檔案的，vuex是實現任意間資料通訊的，他還有一個特點，它是共享資料的，也就是你能直接用你能直接改，那我看到的也是你改之後的結果，最主要他沒有那麼複雜了，都是單線聯絡，雙向繫結

2.求和案例（普通版）

做一個求和的案例

關鍵點一個是要讓我們selection選擇的值能夠成為後面的加減的基數，所以每一個點選事件函式應該加的的是option裡面的值，還有一個點也是這個select框的問題，當我們點選後值變為了字串型別，這裡可以用：單向繫結讓他成為數值型，但是也可以把 v-model專用的三個修飾符用起來，一個number、一個trim、一個lazy（失去焦點在獲取資料）

3.vuex工作原理圖

vuex

要搞懂vuex，就必須把這張圖記下來

vuex是由三個重要部分組成，actions、mutations、state。我們說要把資料交給vuex進行管理其實就是交給state物件進行儲存，它是一個物件，這三個部分其實都是物件，當我們把我們要管理的資料放到state裡面後，就把視線看到vc例項這裡，我們把資料交給vuex了，但是這個時候我們的vc要開始事件了，這個時候沒有資料因為你把資料給到vuex了，想要拿到資料就得遵守它的規則。

先在元件處呼叫api（dispatch）兩個引數，一個是你的函式名和你要傳進去的值，這個時候就把函式和值給到actons來了，這裡面同樣要配置，在actions裡面的函式又有兩個引數，第一個引數context，迷你版store，發起commit請求，提交到mutations，他的引數state和value，你要對值做什麼操作，就可以在這裡加工了，然後state裡面你儲存的值就發生變化了，隨後就會重新解析模板，你的值就到頁面了。

我們的actions，可能你會覺得有點多餘，因為就是一個提交的功能，可以看到它上面有一個api，這是api伺服器的意思，如果當我們傳進來的值不確定需要ajax拿伺服器過來的值，這個時候就要用到actions了，只能在這裡發起請求。當然如果你實在沒有ajax請求，也沒有一些業務邏輯，其實可以省略這一步的，後面也會說。

然後就是devtools，這是vuex的開發者工具。

其實還有一個store的api，他負責管理這三個部分，包括我們的dispatch、commit等api都是他的，所以所有的前提都是要先配置好store

二.vuex核心概念及api

1.搭建vuex開發環境

首先安裝並註冊，vue2要用vuex3版本，vue3要用vuex4版本

這個時候就要去建立vuex核心內容，vuex，官方推薦的是在src下面建立一個目錄store裡面放一個index.js這個js檔案就是我們的store，並且在裡面要定義好我們vuex的核心中的核心，也就是三個過程

這個時候建立好store之後就可以去入口檔案匯入了，然後每個vc、vm例項上就應該都有一個$store的api了，如果是這樣你會發現報錯，讓你要先use註冊再匯入store，但是你會發現把import這句放到use下面還是會報錯

其實歸根結底還是因為腳手架對於import和普通語句的劃分，對於import不管你放在多下面，到時候解析都會先把所有import提升到最上面之後，再按順序去執行每一行程式碼

所以這裡應該這麼做，將我們的use註冊放到store這個js檔案裡面，同時匯入vue，再去入口檔案寫上我們的store

2.求和案例（vuex版）

一定要結合者那張圖去理解

給我們的資料丟進state裡面

然後可以開始我們那張vuex流程圖的步驟來了，首先是vc這裡觸發，呼叫dispatch這個api將我們的函式和要傳進去的引數值發進去
這邊既然傳進去了，那我們action這個物件裡面也要有這個函式才行，所以要去定義在 action這個物件裡面定義的函式，會受到兩個值，第一個值相當於迷你版store裡面有commit、dispatch等方法，第二個值就是我們傳進來引數，直接commit給mutation去處理，這裡我們給mutation的函式可以跟這裡的一樣，但是為了做一個區分一般改成全大寫
在我們mutation處理物件這裡也會收到兩個引數，第一個是我們state物件，第二個是我們傳進來的值，所以要怎麼處理，操作的邏輯一般都寫在這裡了
然後就是我們要怎麼在頁面中呈現出來這個值，vc身上已經有一個$store了，在這個store裡面有一個state，裡面有我們的x的值
剩下的其他邏輯同理即可
完善點一

之前說過可以把一些業務邏輯或者ajax請求放在action裡面，所以這裡奇數加和定時器加可以轉移位置

完善點二

還說過如果沒有業務邏輯或者ajax請求，dispatch進入action這一步稍顯多餘，可以直接進入mutations，直接在dispatch這裡commit

3.vuex開發者工具

需要注意的是之前一直用的最新版本6.14，這個版本屬實不知道怎麼用，可能只拿來支援vue3.0的，其實在谷歌商店下載對應的5.x版本就可以了

base state使我們初始化的資料放在state裡面的值，然後點一次就會執行一次mutations裡面的操作，所以看剛才的原理圖，devtools也是檢測的mutations，然後我們mutations有三個按鈕，從左往右依次為，第一個是將他和之前的一起融合計算最終值就是我們的base state基礎值，第二個是刪除這次操作，資料會回到這次之前的狀態，第三個是直接回到這次的時候資料也是這時候的，但是不會被刪除下面的這些節點

上面三個是全部算為基礎值，第二個是清空，第三個是不檢測了

在最右邊有匯出和匯入，當你想要把你的操作給別人看看問題出現在哪裡的時候，你可以到處，直接在貼上板了，然後他可以點選匯入，直接複製進來

4.context

我們可以看到那個迷你版store有這麼多方法分別都是幹嘛的

第一個commit就不用說了繼續往下走的，第二個dispatch是為了怕我們在這裡的業務邏輯過多寫不完，為了能夠靈活處理，可以在這dispatch，然後就在actions再寫一個你dispatch的函式

然後是我們的state這個物件，有些時候這裡寫邏輯需要用到存進去的這個值，其實在這裡寫mutations要做的的事情確實可以，但是最好按照標準來，因為你如果在這裡寫，開發者工具就失效了

5.getters配置項

store全新配置項

當我們想要對資料作進一步的修改同時呈現在另一個地方，要怎麼做？

你可以直接寫在vue語法裡面，但是寫在這裡面的話，如果你要一大堆的演算法那就不符合風格了這裡

你也可以通過計算屬性來寫，但是計算屬性算出來得值只有這個元件能用

所以這個時候就需要getters了

定義在store裡面，定義完了還要通過store暴露出去，一個物件裡面寫函式接受一個引數state，跟computed一樣返回值就是函式的值

取值通過store下面的getters物件裡面bigNum函式得到

6.mapState和mapGetters

6.1mapstate

像我們原來這樣要寫一大版東西放進vue語法裡面

不太符合vue的風格模板，想要精簡也可以，通過計算屬性

物件寫法：很明顯這是為了引出那個東西，這樣寫也太繁瑣了，vue確實給我們提供了能夠把操作化簡的東西，一個函式裡面傳一個物件以鍵值對的方式給我們要取的名字和我們資料在state中的名字進行組合，不同再寫前面的路徑了，因為本來就是在state裡面去找，它自動生成的就是一個個函式，所以一般是放在計算屬性裡面，而且採用es6語法把物件包著的這些函式開啟

注意匯入的時候怎麼匯入的

我們物件其實屬性和值都應該是加引號的，只是有些時候屬性可以省略，值如果是這裡可以找到這個變數就可以不加引號
陣列寫法：當我們屬性和值一樣的時候，簡寫形式是針對於後面是一個變數不是字串的時候，這裡不能用簡寫，但是如果真的屬性和值是一樣的那麼這裡可以採取陣列寫法來簡寫