最近一直工作比較忙，博客已經鴿了好久了，趁着今天是周末，寫點東西吧
使用vuex來管理數據
- 最近一直在用vue做項目，但是卻從來沒真正去用過vuex，因為一直感覺很復雜，其實真正去研究一下啊，就會發現很容易。
vuex中，有默認的五種基本的對象：
- state：存儲狀態（變量）
- getters：對數據獲取之前的再次編譯，可以理解為state的計算屬性。我們在組件中使用 $sotre.getters.fun()
- mutations：修改狀態，並且是同步的。在組件中使用$store.commit('',params)。這個和我們組件中的自定義事件類似。
- actions：異步操作。在組件中使用是$store.dispath('')
- modules：store的子模塊，為了開發大型項目，方便狀態管理而使用的。這里我們就不解釋了，用起來和上面的一樣。
怎么引用這里就不介紹了，如果使用的是3.0cli，在創建項目的時候，選擇安裝vuex模塊，會自動配置好store.js，很方便
定義變量
- 在store.js中，你會發現有我上面提到的那些對象，這里隨便定義個變量。
和頁面中在data寫變量差不多。
使用變量
- 就和正常的變量使用是一樣的，只不過前面是$store
- {{$store.state.count}}
- 到這一步你就已經會了一小半了，很簡單的吧？
回想一下，我們只需要在下載安裝使用vuex，在我們定義的store.js中定義state對象，並且暴露出去。
在main.js中使用我們的store.js（這里是為了防止在各個組件中引用，因為main.js中，有我們的new Vue 實例啊！）
現在我們已經使用了vuex中的state，接下來我們如何操作這個值呢？ 沒錯！用mutations和actions
我們繼續操作store.js文件
我們在sotre.js中定義mutations對象，該對象中有兩個方法，mutations里面的參數，第一個默認為state，接下來的為自定義參數。
// 其實說白了就是通過其他頁面的方法來調用這里的方法，所以這里要寫對數據的操作，會直接同步到state
mutations: {
add(state, n) {
state.xone = state.xone + n
},
remove(state, n) {
if (state.xone > 0) {
state.xone = state.xone - n
} else {
state.xone = 0
}
}
},
然后我們在頁面中，使用這個方法
methods: {
add (n) {
// 首先，通過這個向vuex傳一個函數，括號內的就是函數名，傳到了actions里面。這個是異步更新的
this.$store.dispatch('addFun', n)
// 如果要直接修改state的值可以用下面這個，但是官方不推薦，這個是同步更新的
// this.$store.commit('add', n)
},
remove (n) {
// this.$store.commit('remove', n)
this.$store.dispatch('removeFun', n)
}
},
- 當然了，這個n參數也是可以不傳的，如果你需要一些計算的話，就傳上
然后打開瀏覽器試一下吧，我們可以看到每當觸發事件時，我們都可以在vue開發工具中看到我們觸發的mutations方法，以及參數
完美！
接下來就是actions，actions是異步操作
創建actions對象，並且使用
actions: {
// 調用mutations的add方法，這個addFun是從其他頁面定義的方法，mutations則是接參數，這個參數對應上面的mutations，
addFun(mutations, n) {
// 這個commit可以理解為調用上面的某個方法
mutations.commit('add', n)
},
// 調用上面的remove方法
removeFun(mutations, n) {
mutations.commit('remove', n)
}
}