引入vuex
1.利用npm包管理工具，進(jìn)行安裝 vuex。在控制命令行中輸入下邊的命令就可以了。
npm install vuex --save
需要注意的是這里一定要加上 –save，因?yàn)槟氵@個(gè)包我們在生產(chǎn)環(huán)境中是要使用的。
2.新建一個(gè)vuex文件夾（這個(gè)不是必須的），并在文件夾下新建store.js文件，文件中引入我們的vue和vuex。
import Vue from 'vue';
import Vuex from 'vuex';
3.使用我們vuex，引入之后用Vue.use進(jìn)行引用。
Vue.use(Vuex);
通過這三步的操作，vuex就算引用成功了，接下來我們就可以盡情的玩耍了。
入門小Demo
我們這個(gè)小案例先聲明一個(gè)state的count狀態(tài)，在頁面中使用顯示這個(gè)count，然后可以利用按鈕進(jìn)行加減，如果你看過我的文章，你一定知道，在我們學(xué)基礎(chǔ)知識(shí) 的時(shí)候經(jīng)常編寫這個(gè)程序。我們來張圖片幫大家回憶一下。
就是這個(gè)程序，不過我們這次要用的是vuex來進(jìn)行制作，并實(shí)現(xiàn)數(shù)據(jù)的共享。
1.現(xiàn)在我們store.js文件里增加一個(gè)常量對象。store.js文件就是我們在引入vuex時(shí)的那個(gè)文件。
const state={
????count:1
}
2.用export default 封裝代碼，讓外部可以引用。
export default new Vuex.Store({
state
})
3.新建一個(gè)vue的模板，位置在components文件夾下，名字叫count.vue。在模板中我們引入我們剛建的store.js文件，并在模板中用{{$store.state.count}}輸出count 的值。
<template>
<div>
? <h2> ?{{msg}} </h2>
? ?<h3> {{$store.state.count}} </h3>
</div>
</template>
<script>
import store from '@/vuex/store'
? ? export default{
? ? ? ? data(){
? ? ? ? ? ? return{
? ? ? ? ? ? ? ? msg:'Hello Vuex',
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? store
?}
</script>
4.在store.js文件中加入兩個(gè)改變state的方法。
const mutations={????
add(state){??????
??state.count++;??
??},?
???reduce(state){???
?????state.count--;????
}}?
這里的mutations是固定的寫法，意思是改變的，我們到時(shí)候會(huì)用一節(jié)課專門講這個(gè)mutations，所以你先不用著急，只知道我們要改變state的數(shù)值的方法，必須寫在mutations里就可以了。
5.在count.vue模板中加入兩個(gè)按鈕，并調(diào)用mutations中的方法。
<div>
<button @click="$store.commit('add')"> + </button>
<button ?@click="$store.commit('reduce')" > - </button>
</div>
這樣進(jìn)行預(yù)覽就可以實(shí)現(xiàn)對vuex中的count進(jìn)行加減了。
state訪問狀態(tài)對象
在第1節(jié)我們已經(jīng)寫了一個(gè) const state ，這個(gè)就是我們說的訪問狀態(tài)對象，它就是我們SPA（單頁應(yīng)用程序）中的共享值。今天我們主要學(xué)習(xí)狀態(tài)對象賦值給內(nèi)部對象，也就是把stroe.js中的值，賦值給我們模板里data中的值。我們有三種賦值方式，我們一個(gè)一個(gè)來學(xué)習(xí)一下。
一、通過computed的計(jì)算屬性直接賦值
computed屬性可以在輸出前，對data中的值進(jìn)行改變，我們就利用這種特性把store.js中的state值賦值給我們模板中的data值。
computed:{
????count(){
????????return this.$store.state.count;
????}
}
這里需要注意的是return this.$store.state.count這一句，一定要寫this，要不你會(huì)找不到$store的。這種寫法很好理解，但是寫起來是比較麻煩的，那我們來看看第二種寫法。
二、通過mapState的對象來賦值
我們首先要用import引入mapState。
import {mapState} from 'vuex';
然后還在computed計(jì)算屬性里寫如下代碼：
computed:mapState({
????????count:state=>state.count
})
這里我們使用ES6的箭頭函數(shù)來給count賦值。
三、通過mapState的數(shù)組來賦值
computed:mapState(["count"])
這個(gè)算是最簡單的寫法了，在實(shí)際項(xiàng)目開發(fā)當(dāng)中也經(jīng)常這樣使用。
這就是三種賦值方式，是不是很簡單，雖然簡單，但是在實(shí)際項(xiàng)目中經(jīng)常使用，一定要自己動(dòng)手練習(xí)兩遍啊。
Mutations修改狀態(tài)
上節(jié)課我們學(xué)習(xí)了怎么樣讀取state，那今天我們學(xué)習(xí)一下怎么樣修改狀態(tài)。這個(gè)常量我們在第一節(jié)課的時(shí)候也碰到過，并且進(jìn)行了加減的操作。那這節(jié)課我們就具體學(xué)習(xí)一下，如何操作Mutations。
$store.commit( )
Vuex提供了commit方法來修改狀態(tài)，我們粘貼出第一節(jié)課的代碼內(nèi)容，簡單回顧一下，我們在button上的修改方法。
<button @click="$store.commit('add')"> + </button>
<button?@click="$store.commit('reduce')"> - </button>
store.js文件：
const mutations={
????add(state){
????????state.count++;
????},
????reduce(state){
????????state.count--;
????}
}
傳值：
這只是一個(gè)最簡單的修改狀態(tài)的操作，在實(shí)際項(xiàng)目中我們常常需要在修改狀態(tài)時(shí)傳值。比如上邊的例子，是我們每次只加1，而現(xiàn)在我們要通過所傳的值進(jìn)行相加。其實(shí)我們只需要在Mutations里再加上一個(gè)參數(shù)，并在commit的時(shí)候傳遞就就可以了。我們來看具體代碼：
現(xiàn)在store.js文件里給add方法加上一個(gè)參數(shù)n。添加的地方我已經(jīng)標(biāo)黃了。
const mutations={
????add(state,n){
????????state.count+=n;
????},
????reduce(state){
????????state.count--;
????}
}
在Count.vue里修改按鈕的commit( )方法傳遞的參數(shù)，我們傳遞10，意思就是每次加10.
<p>
<button @click="$store.commit('add',10)"> + </button>
<button @click="$store.commit('reduce')"> - </button>
</p>
這樣兩個(gè)簡單的修改我們就完成了傳值，我們可以在瀏覽器中實(shí)驗(yàn)一下了
模板獲取Mutations方法
實(shí)際開發(fā)中我們也不喜歡看到$store.commit( )這樣的方法出現(xiàn)，我們希望跟調(diào)用模板里的方法一樣調(diào)用。
例如：@click=”reduce” ? 就和沒引用vuex插件一樣。
要達(dá)到這種寫法，只需要簡單的兩部就可以了：
? ??1.在模板count.vue里用import 引入我們的mapMutations：
? ??????import { mapState,mapMutations } from 'vuex';
? ? 2.在模板的<script>?標(biāo)簽里添加methods屬性，并加入mapMutations標(biāo)簽里添加methods屬性，并加入mapMutations
methods:mapMutations([
????????'add','reduce'
]),
通過上邊兩部，我們已經(jīng)可以在模板中直接使用我們的reduce或者add方法了，就像下面這樣。
<button @click="reduce"> - </button>
getters計(jì)算過濾操作
getters從表面是獲得的意思，可以把他看作在獲取數(shù)據(jù)之前進(jìn)行的一種再編輯,相當(dāng)于對數(shù)據(jù)的一個(gè)過濾和加工。你可以把它看作store.js的計(jì)算屬性。
getters基本用法：
比如我們現(xiàn)在要對store.js文件中的count進(jìn)行一個(gè)計(jì)算屬性的操作，就是在它輸出前，給它加上100.
我們首先要在store.js里用const聲明我們的getters屬性。
const getters = {
????count:function(state){
????????return state.count +=100;
????}
}
寫好了gettters之后，我們還需要在Vuex.Store()里引入，由于之前我們已經(jīng)引入了state盒mutations，所以引入里有三個(gè)引入屬性。代碼如下，
export default new Vuex.Store({
????state,mutations,getters
})
在store.js里的配置算是完成了，我們需要到模板頁對computed進(jìn)行配置。在vue 的構(gòu)造器里邊只能有一個(gè)computed屬性，如果你寫多個(gè)，只有最后一個(gè)computed屬性可用，所以要對上節(jié)課寫的computed屬性進(jìn)行一個(gè)改造。改造時(shí)我們使用ES6中的展開運(yùn)算符”…”。
computed:{
????...mapState(["count"]),
????count(){
????????return this.$store.getters.count;
????}
},
需要注意的是，你寫了這個(gè)配置后，在每次count 的值發(fā)生變化的時(shí)候，都會(huì)進(jìn)行加100的操作。
用mapGetters簡化模板寫法：
我們都知道state和mutations都有map的引用方法把我們模板中的編碼進(jìn)行簡化，我們的getters也是有的，我們來看一下代碼。
首先用import引入我們的mapGetters
import { mapState,mapMutations,mapGetters } from 'vuex';
在computed屬性中加入mapGetters
...mapGetters(["count"])
相信大家已經(jīng)會(huì)了getters的用法，那我們下節(jié)課見了。
