/* moduleA.js */
const moduleA = {
state: {
text: 'hello'
},
mutations: {
addText (state, txt) {
// 這里的 `state` 對象是模塊的局部狀態
state.text += txt
}
},
actions: {
setText ({ commit }) {
commit('addText', ' world')
}
},
getters: {
getText (state) {
return state.text + '!'
}
}
}
export default moduleAimport Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './modules/moduleA'
import moduleB from './modules/moduleB'
import { mutations } from './mutations'
import actions from './actions'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
groups: [1]
},
modules: {
moduleA, // 引入 A 模塊
moduleB, // 引入 B 模塊
},
actions, // 根級別的 action
mutations, // 根級別的 mutations
// 根級別的 getters
getters: {
getGroups (state) {
return state.groups
}
}
})眾所周知 Vuex 是什么呢？是用來干嘛的呢？
Vuex 是一個專為 Vue.js 應用程序開發的`狀態管理模式`。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
例如：你有幾個數據，幾個操作，在多個組件上都需要使用，如果每個組件都去調用都是寫，就會很麻煩，代碼又臭又長。當然 如果沒有大量的操作和數據需要在多個組件內使用的話呢，其實也就可以不用這個 Vuex了。看個人吧！
這里我就用自己對 Vuex 的理解來介紹這個東西怎么去使用，我人也不聰明，整好久才整明白，話不多說，下面開始上代碼。
1、首先為了項目格式便於維護和相對規范一點，我們先在 目錄下建立一個 store 文件夾，並且在下面建立一個 store.js 文件：
2、簡單明了，先引入 Vue 和 Vuex 並且別忘了 Vue.use(Vuex);
當然你 Vuex 首先得跟 main.js 扯上點關系嘛。這里的m_index.js === main.js 因為項目原因，暫時換了個名字，不過也無影響，好了我們繼續。
=》引入 store 文件 =》 並且 Vue 實例上得將 掛載 store ，這下萬無一失。可以繼續了
然后我們就可以開始編寫我們的vuex業務代碼了，那么，我們的數據如何保存？
3、現在開始 Vuex 的主宰部分 new Vuex.Store（{}）
在這張圖上可以清楚的看到 new Vuex.Store 里面有一個 state:{ } 注釋也寫了，
這是你要設置的全局訪問的 state 對象，也就是你需要 count 就丟個 count進去，需要 price 就丟個 price進去，
這里我丟了個 count 和 ChangeShowCom 兩個不同的數據類型 作為一個對比。
4、如何在頁面中獲取 state 里面的 數據呢？
5、getters =》getters 和 組件的 computed 類似，方便直接生成一些可以直接用的數據。當組裝的數據要在多個頁面使用時，就可以使用 getters 來做。
注釋也寫了，getters 可以實時監聽state值的變化(最新狀態)
我給getters里面獲取count值的方法命名為 getCount 並且需要傳入 state
那么如何獲取 通過 getters 獲取 承載變化的 count 的值呢？
6、那么， 我們如果想改變 count 的值，應該怎么做呢？ 這時候就可以用到 mutations 。
要修改store中的值唯一的方法就是提交mutation來修改，我們現在Hello World.vue文件中添加兩個按鈕，一個加1，一個減1；
這里我們點擊按鈕調用add（執行加的方法）和del（執行減法的方法），然后在里面直接提交mutations中的方法修改值：
修改store.js文件，添加mutations，在mutations中定義兩個函數，用來對count加1和減1，
這里定義的兩個方法就是上面commit提交的兩個方法如下：
我們可以將參數傳遞給mutations中的函數進行計算 這里是 num 。
現在我們看看效果 ：
很好，count 數值都發生了改變，我點擊了兩下，並且 是可以在 Vue Devtools 中的 Vuex 看到過程效果
payload ：1 就是數值變化1 type 操作的方法是 addCount 也就是 mutations 根方法
ok！完美。
7、到了 Actions 了
Action 類似於 mutation，不同在於：
- Action 提交的是 mutation，而不是直接變更狀態。
- Action 可以包含任意異步操作。
我們來看一下：
然后我們去修改Hello World.vue文件：
這里我們把commit提交mutations修改為使用dispatch來提交actions；我們點擊頁面，效果是一樣的。
現在讓我們來看看效果，這里我又點擊了6下，很顯然，效果是一樣的。
注意，當實際寫項目的時候 里面未必直接傳的是 數字1 可能是對象啊 或者字符串啊。所以這個時候就要注意了，我舉個例子：
這里寫個 input 輸入框 雙向綁定一個 something 記得在 data 里面初始化一下，
然后，我們將something 傳入這個方法里面 add(something)
這個時候，看着好像沒有什么問題，那么問題這時候就來了，我們先試試點加號會發生什么？
我點擊了三下加號，看到沒，直接在 0后面拼接了111 變成0111 這顯然不是我們想要的效果了，這是為什么呢？
我們來打印一下 這個 1 的數據類型
原來如此，這個是字符串類型，難怪不能直接加，那么現在我們該怎么辦呢？當然是 字符串轉換成數字啦 parseInt()
當然是 字符串轉換成數字啦 哈哈哈哈哈哈 parseInt(); 方法 然后繼續打印結果
好了，現在就是數字類型了，那么我們繼續最后一步，並且看看效果吧
這里我點擊了三下，結果成功的變成了 6.
8、來看一下 Vuex 里面的好東西，輔助函數 mapState、mapGetters、mapActions
如果我們不喜歡這種在頁面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”這種很長的寫法，
那么我們可以使用mapState、mapGetters、mapActions就不會這么麻煩了；
並且我們配合 ... 拓展符 一起使用。
