引入vuex
1.利用npm包管理工具仰担，進行安裝 vuex令杈。在控制命令行中輸入下邊的命令就可以了锁蠕。
npm install vuex --save
需要注意的是這里一定要加上 –save养葵，因為你這個包我們在生產(chǎn)環(huán)境中是要使用的入客。
2.新建一個vuex文件夾（這個不是必須的）自阱，并在文件夾下新建store.js文件嚎莉，文件中引入我們的vue和vuex。
import Vue from 'vue';
import Vuex from 'vuex';
3.使用我們vuex沛豌，引入之后用Vue.use進行引用趋箩。
Vue.use(Vuex);
通過這三步的操作，vuex就算引用成功了加派，接下來我們就可以盡情的玩耍了叫确。
入門小Demo
我們這個小案例先聲明一個state的count狀態(tài)，在頁面中使用顯示這個count芍锦，然后可以利用按鈕進行加減竹勉，如果你看過我的文章，你一定知道娄琉，在我們學(xué)基礎(chǔ)知識 的時候經(jīng)常編寫這個程序次乓。我們來張圖片幫大家回憶一下。
就是這個程序孽水，不過我們這次要用的是vuex來進行制作票腰，并實現(xiàn)數(shù)據(jù)的共享。
1.現(xiàn)在我們store.js文件里增加一個常量對象女气。store.js文件就是我們在引入vuex時的那個文件杏慰。
const state={
????count:1
}
2.用export default 封裝代碼，讓外部可以引用。
export default new Vuex.Store({
state
})
3.新建一個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文件中加入兩個改變state的方法。
const mutations={????
add(state){??????
??state.count++;??
??},?
???reduce(state){???
?????state.count--;????
}}?
這里的mutations是固定的寫法吟税，意思是改變的，我們到時候會用一節(jié)課專門講這個mutations姿现，所以你先不用著急肠仪，只知道我們要改變state的數(shù)值的方法，必須寫在mutations里就可以了备典。
5.在count.vue模板中加入兩個按鈕异旧，并調(diào)用mutations中的方法。
<div>
<button @click="$store.commit('add')"> + </button>
<button ?@click="$store.commit('reduce')" > - </button>
</div>
這樣進行預(yù)覽就可以實現(xiàn)對vuex中的count進行加減了提佣。
state訪問狀態(tài)對象
在第1節(jié)我們已經(jīng)寫了一個 const state 吮蛹，這個就是我們說的訪問狀態(tài)對象，它就是我們SPA（單頁應(yīng)用程序）中的共享值拌屏。今天我們主要學(xué)習(xí)狀態(tài)對象賦值給內(nèi)部對象潮针，也就是把stroe.js中的值，賦值給我們模板里data中的值倚喂。我們有三種賦值方式每篷，我們一個一個來學(xué)習(xí)一下。
一端圈、通過computed的計算屬性直接賦值
computed屬性可以在輸出前焦读，對data中的值進行改變，我們就利用這種特性把store.js中的state值賦值給我們模板中的data值舱权。
computed:{
????count(){
????????return this.$store.state.count;
????}
}
這里需要注意的是return this.$store.state.count這一句矗晃，一定要寫this，要不你會找不到$store的宴倍。這種寫法很好理解张症，但是寫起來是比較麻煩的，那我們來看看第二種寫法啊楚。
二吠冤、通過mapState的對象來賦值
我們首先要用import引入mapState。
import {mapState} from 'vuex';
然后還在computed計算屬性里寫如下代碼：
computed:mapState({
????????count:state=>state.count
})
這里我們使用ES6的箭頭函數(shù)來給count賦值恭理。
三拯辙、通過mapState的數(shù)組來賦值
computed:mapState(["count"])
這個算是最簡單的寫法了，在實際項目開發(fā)當(dāng)中也經(jīng)常這樣使用。
這就是三種賦值方式涯保，是不是很簡單诉濒，雖然簡單，但是在實際項目中經(jīng)常使用夕春，一定要自己動手練習(xí)兩遍啊未荒。
Mutations修改狀態(tài)
上節(jié)課我們學(xué)習(xí)了怎么樣讀取state，那今天我們學(xué)習(xí)一下怎么樣修改狀態(tài)及志。這個常量我們在第一節(jié)課的時候也碰到過片排，并且進行了加減的操作。那這節(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--;
????}
}
傳值：
這只是一個最簡單的修改狀態(tài)的操作每界，在實際項目中我們常常需要在修改狀態(tài)時傳值捅僵。比如上邊的例子，是我們每次只加1眨层，而現(xiàn)在我們要通過所傳的值進行相加庙楚。其實我們只需要在Mutations里再加上一個參數(shù)，并在commit的時候傳遞就就可以了谐岁。我們來看具體代碼：
現(xiàn)在store.js文件里給add方法加上一個參數(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>
這樣兩個簡單的修改我們就完成了傳值，我們可以在瀏覽器中實驗一下了
模板獲取Mutations方法
實際開發(fā)中我們也不喜歡看到$store.commit( )這樣的方法出現(xiàn)航揉，我們希望跟調(diào)用模板里的方法一樣調(diào)用塞祈。
例如：@click=”reduce” ? 就和沒引用vuex插件一樣。
要達到這種寫法帅涂，只需要簡單的兩部就可以了：
? ??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計算過濾操作
getters從表面是獲得的意思醇锚，可以把他看作在獲取數(shù)據(jù)之前進行的一種再編輯,相當(dāng)于對數(shù)據(jù)的一個過濾和加工哼御。你可以把它看作store.js的計算屬性坯临。
getters基本用法：
比如我們現(xiàn)在要對store.js文件中的count進行一個計算屬性的操作，就是在它輸出前恋昼，給它加上100.
我們首先要在store.js里用const聲明我們的getters屬性看靠。
const getters = {
????count:function(state){
????????return state.count +=100;
????}
}
寫好了gettters之后，我們還需要在Vuex.Store()里引入液肌，由于之前我們已經(jīng)引入了state盒mutations挟炬，所以引入里有三個引入屬性。代碼如下嗦哆，
export default new Vuex.Store({
????state,mutations,getters
})
在store.js里的配置算是完成了谤祖，我們需要到模板頁對computed進行配置。在vue 的構(gòu)造器里邊只能有一個computed屬性老速，如果你寫多個泊脐，只有最后一個computed屬性可用，所以要對上節(jié)課寫的computed屬性進行一個改造烁峭。改造時我們使用ES6中的展開運算符”…”。
computed:{
????...mapState(["count"]),
????count(){
????????return this.$store.getters.count;
????}
},
需要注意的是秕铛，你寫了這個配置后约郁，在每次count 的值發(fā)生變化的時候，都會進行加100的操作但两。
用mapGetters簡化模板寫法：
我們都知道state和mutations都有map的引用方法把我們模板中的編碼進行簡化鬓梅，我們的getters也是有的，我們來看一下代碼谨湘。
首先用import引入我們的mapGetters
import { mapState,mapMutations,mapGetters } from 'vuex';
在computed屬性中加入mapGetters
...mapGetters(["count"])
相信大家已經(jīng)會了getters的用法绽快，那我們下節(jié)課見了。
