一.簡介

主要作用是一個數(shù)據倉庫，管理狀態(tài)（中大型項目）

管理狀態(tài)：共用的屬性或者數(shù)據，比如登錄界面，得到用戶信息，其他界面會用到在這些信息，不用再次從服務器端獲取，vuex就做到了把這些數(shù)據進行了共享

二.引入vuex

1.利用npm包管理工具，進行安裝 vuex。在控制命令行中輸入下邊的命令就可以了。

npm install vuex --save

2.新建一個vuex文件夾（這個不是必須的），并在文件夾下新建store.js文件，文件中引入我們的vue和vuex

3.在components下新建模板count.vue

引入state

import store from '@/vuex/store'

三.state訪問(獲取)狀態(tài)對象

已經寫了一個 const state ，這個就是我們說的訪問狀態(tài)對象，它就是我們SPA（單頁應用程序）中的共享值。狀態(tài)對象賦值給內部對象，也就是把stroe.js中的值，賦值給我們模板里data中的值。有三種賦值方式

四.Mutations修改狀態(tài)

1.關于參數(shù)的傳遞。

在count.vue里面，第一個參數(shù)為方法名，第二個為要傳進去的方法。如圖

在store.js里面，第一個參數(shù)是默認的，用來操作count，第二個參數(shù)為要接受的形參

2.簡化事件綁定，如下圖

第一步要先引入mapMutations

第二步要在methods里面寫mapMutations

如圖

五.getters計算過濾操作

getters從表面是獲得的意思，可以把他看作在獲取數(shù)據之前進行的一種再編輯,相當于對數(shù)據的一個過濾和加工。你可以把它看作store.js的計算屬性。

getters基本用法：

比如我們現(xiàn)在要對store.js文件中的count進行一個計算屬性的操作，就是在它輸出前，給它加上100.

我們首先要在store.js里用const聲明我們的getters屬性。

寫好了gettters之后，我們還需要在Vuex.Store()里引入，由于之前我們已經引入了state盒mutations，所以引入里有三個引入屬性。代碼如下，

在store.js里的配置算是完成了，我們需要到模板頁對computed進行配置。在vue 的構造器里邊只能有一個computed屬性，如果你寫多個，只有最后一個computed屬性可用，所以要對之前computed屬性進行一個改造。改造時我們使用ES6中的展開運算符”…”。

需要注意的是，你寫了這個配置后，在每次count 的值發(fā)生變化的時候，都會進行加100的操作

用mapGetters簡化模板寫法：

首先用import引入我們的mapGetters

在computed屬性中加入mapGetters

六.actions異步修改狀態(tài)

actions和之前的Mutations功能基本一樣，不同點是，actions是異步的改變state狀態(tài)，而Mutations是同步改變狀態(tài)。

在store.js中聲明actions

在actions里寫了兩個方法addAction和reduceAction，在方法體里，我們都用commit調用了Mutations里邊的方法。

context：上下文對象，這里可以理解稱store本身。

{commit}：直接把commit對象傳遞過來，可以讓方法體邏輯和代碼更清晰明了。

模板中的使用

改造一下methods方法，首先還是用擴展運算符把mapMutations和mapActions加入（要在import里面提前引入）

增加異步檢驗

看到在控制臺先打印出了‘我比reduce提前執(zhí)行’這句話

七.module模塊組

隨著項目的復雜性增加，我們共享的狀態(tài)越來越多，這時候我們就需要把我們狀態(tài)的各種操作進行一個分組，分組后再進行按組編寫

聲明模塊組：

在vuex/store.js中聲明模塊組，我們還是用我們的const常量的方法聲明模塊組。代碼如下：

聲明好后，我們需要修改原來 Vuex.Stroe里的值：

在模板中使用

現(xiàn)在我們要在模板中使用count狀態(tài)，要用插值的形式寫入。

<h3>

{{$store.state.a.count}}

</h3>

如果想用簡單的方法引入，還是要在我們的計算屬性中rutrun我們的狀態(tài)。寫法如下：