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

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

註意導入的時候怎麼導入的

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