管理全域性變數，便於元件之間傳值

一、建立檔案
1、在store資料夾中新建index.js檔案

import Vue from 'vue' //引入vue
import Vuex from 'vuex' //引入vue
//使用vuex
Vue.use(Vuex)

//建立Vuex例項
const store = new Vuex.Store({
state:{
count:1 //儲存的資料
}
})

export default store //匯出store
2、在main.js中引用檔案，例項引入store物件

import store from ./store/index

new Vue({
store
})
二、State
資料儲存在index.js檔案中，可使用this.$store.state來獲取自定義資料

三、Getters
相當於vue中的computed計算屬性，getter 的返回值會根據它的依賴被快取起來，且只有當它的依賴值發生了改變才會被重新計算。Getters 可以用於監聽、state中的值的變化，返回計算後的結果

this.$store.getters.getStoreCount
//頁面中這樣寫可直接呼叫getters中的方法


//index.js檔案中定義getters的方法
const store = new Vuex.Store({
state:{
count:1
},
getters:{
getStoreCount:function(state){
return state.count+1;
}
}
})
四、Mutations
用來修改store中的值

//在頁面的方法中呼叫mutation的方法
methos:{
addFun(){
this.$store.commit("add");
},
reductionFun(){
this.$store.commit("reduction");
}
}
在index.js檔案中新增mutations

const store = new Vuex.Store({
state:{
count:1
},
getters:{
getStoreCount:function(state){
return state.count+1;
}
},
mutations:{
add(state){ //注意書寫語法
state.count = state.count+1;
},
reduction(state){
state.count = state.count-1;
}
}
})
五、Action
雖然上述方法可以修改頁面的值，但是官方並不建議這樣做，我們可以使用action呼叫mutation改變狀態的值

const store = new Vuex.Store({
state:{
count:1
},
getters:{
getStoreCount:function(state){
return state.count+1;
}
},
mutations:{
add(state){ //注意書寫語法
state.count = state.count+1;
},
reduction(state){
state.count = state.count-1;
}
},
actions:{ //註冊actions，類似vue裡的mothods
addFun(context){ //接收一個與store例項具有相同方法屬性的context物件
context.commit("add");
},
reductionFun(context){
context.commit("reduction");
}
}
})
頁面的呼叫如下：

methos:{
addFun(){
this.$store.dispatch("addFun");
//this.$store.commit("add");
},
reductionFun(){
this.$store.dispatch("reductionFun");
//this.$store.commit("reduction");
}
}
若想傳參也依次在呼叫的方法中加入即可

六、mapState、mapGetters、mapActions、mapMutations
可以使呼叫更加簡潔，不用寫很長

//vue檔案中
//頁面可直接使用自定義變數名{{conuNum}}表示

import {mapState, mapActions, mapGetters} from 'vuex'


computed:{
...mapState({
countNum: state=>state.count
})
}
//將 this.commonActionGet() 對映為 this.$store.dispatch('commonActionGet')

//這種寫法方法名稱必須對應
...mapActions(['commonActionGet', 'commonActionGetJSON'])

...mapActions({
'commonActionGet': 'commonActionGet',
'commonActionGetJSON': 'commonActionGetJSON'
})
七、總結
1、index.js 定義Vuex.Store

2、state 相當於資料庫，定義了資料的結構和初始值

3、getters 獲取state中的狀態並返回，但是不能修改

4、actions 提交狀態，呼叫mutations方法對資料進行操作

5、mutations 定義state資料的修改操作

6、mapState、mapGetters、mapActions、mapMutations 做對映