今天內容挺多，因為想的是必須在一天內把這個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語法把物件包著的這些函式打開

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

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