一、Vuex 是什么？
??Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
這個(gè)狀態(tài)自管理應(yīng)用包含以下幾個(gè)部分：
- state，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；
- view，以聲明方式將 state 映射到視圖；
- actions，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化。
二、引入Vuex（前提是已經(jīng)用Vue腳手架工具構(gòu)建好項(xiàng)目）
- 1、利用npm包管理工具，進(jìn)行安裝 vuex。在控制命令行中輸入下邊的命令就可以了。
npm install vuex --save
??要注意的是這里一定要加上 –save，因?yàn)槟氵@個(gè)包我們?cè)谏a(chǎn)環(huán)境中是要使用的。
- 2、新建一個(gè)store文件夾（這個(gè)不是必須的），并在文件夾下新建store.js文件，文件中引入我們的vue和vuex。
import Vue from 'vue';
import Vuex from 'vuex';
- 3、使用我們vuex，引入之后用Vue.use進(jìn)行引用。
Vue.use(Vuex);
??通過這三步的操作，vuex就算引用成功了，接下來我們就可以操作了。
- 4、在main.js 中引入新建的vuex文件
import storeConfig from './vuex/store'
- 5、再然后 , 在實(shí)例化 Vue對(duì)象時(shí)加入 store 對(duì)象 :
new Vue({
el: '#app',
router,
store, //將store掛載到vue上,通過在根實(shí)例中注冊(cè) store 選項(xiàng)，該 store 實(shí)例會(huì)注入到根組件下的所有子組件中，且子組件能通過 this.$store訪問到.
template: '<App/>',
components: { App }
})
三、Vuex核心及最基本的 Vuex 記數(shù)示例
??每一個(gè) Vuex 應(yīng)用的核心就是 store（倉庫）?！皊tore”基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。Vuex 和單純的全局對(duì)象有以下兩點(diǎn)不同：
- Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。
- 你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
最簡(jiǎn)單的 Store
??安裝Vuex 之后，讓我們來創(chuàng)建一個(gè) store。創(chuàng)建過程直截了當(dāng)——僅需要提供一個(gè)初始 state 對(duì)象和一些 mutation：
// 如果在模塊化構(gòu)建系統(tǒng)中，請(qǐng)確保在開頭調(diào)用了 Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
??現(xiàn)在，你可以通過 store.state 來獲取狀態(tài)對(duì)象，以及通過 store.commit 方法觸發(fā)狀態(tài)變更：
store.commit('increment')
console.log(store.state.count) // -> 1
??再次強(qiáng)調(diào)，我們通過提交mutation 的方式，而非直接改變 store.state.count，是因?yàn)槲覀兿胍鞔_地追蹤到狀態(tài)的變化。這個(gè)簡(jiǎn)單的約定能夠讓你的意圖更加明顯，這樣你在閱讀代碼的時(shí)候能更容易地解讀應(yīng)用內(nèi)部的狀態(tài)改變。此外，這樣也讓我們有機(jī)會(huì)去實(shí)現(xiàn)一些能記錄每次狀態(tài)改變，保存狀態(tài)快照的調(diào)試工具。有了它，我們甚至可以實(shí)現(xiàn)如時(shí)間穿梭般的調(diào)試體驗(yàn)。
??由于 store 中的狀態(tài)是響應(yīng)式的，在組件中調(diào)用 store 中的狀態(tài)簡(jiǎn)單到僅需要在計(jì)算屬性中返回即可。觸發(fā)變化也僅僅是在組件的 methods 中提交 mutation。
