Vuex 是什么？
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式孵滞。它采用集中式存儲管理應用的所有組件的狀態(tài)漱挚，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化俭识。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試兼都、狀態(tài)快照導入導出等高級調試功能嫂沉。
當我們的應用遇到多個組件共享狀態(tài)時,例如
- 多個視圖依賴于同一狀態(tài)。
- 來自不同視圖的行為需要變更同一狀態(tài)扮碧。
對于問題一趟章，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。對于問題二尤揣，我們經常會采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝搔啊。以上的這些模式非常脆弱，通常會導致無法維護的代碼北戏。
因此负芋，我們把組件的共享狀態(tài)抽取出來，以一個全局單例模式管理嗜愈。在這種模式下旧蛾，我們的組件樹構成了一個巨大的“視圖”，不管在樹的哪個位置蠕嫁，任何組件都能獲取狀態(tài)或者觸發(fā)行為锨天！
另外，通過定義和隔離狀態(tài)管理中的各種概念并強制遵守一定的規(guī)則剃毒，我們的代碼將會變得更結構化且易維護病袄。
直接下載 / CDN 引用
Unpkg.com 提供了基于 NPM 的 CDN 鏈接。以上的鏈接會一直指向 NPM 上發(fā)布的最新版本赘阀。您也可以通過 https://unpkg.com/vuex@2.0.0 這樣的方式指定特定的版本益缠。
在 Vue 之后引入 vuex 會進行自動安裝：
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
#NPM
npm install vuex --save
#Yarn
yarn add vuex
在一個模塊化的打包系統(tǒng)中，您必須顯式地通過 Vue.use() 來安裝 Vuex：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
當使用全局 script 標簽引用 Vuex 時基公，不需要以上安裝過程幅慌。
最簡單的 Store
html
<div id="app">
<p>{{ count }}</p>
<p>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</p>
</div>
js
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: state => state.count++,
decrement: state => state.count--
}
})
new Vue({
el: '#app',
computed: {
count () {
return store.state.count
}
},
methods: {
increment () {
store.commit('increment')
},
decrement () {
store.commit('decrement')
}
}
})
