1. 集中管理共享的數據，易于開發和后期維護；
2. 能夠高效的實現組件之間的數據共享，提高開發效率；
3. 存儲在Vuex的數據是響應式的，能夠實時保持頁面和數據的同步；

安裝Vuex依賴包

npm install vuex --save

導入包

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)

創建store對象

const store = new Vuex.Store({state: {},mutations: {}，actions：{}，getters: {}
})

將store對象掛載到vue的實例中

new Vue({el: '#app',render: h => h(app),router,//將創建的共享數據對象掛載到vue的實例中，所有的組件就可以直接從store中獲取全局的數據了store
})

---

State和Mutation

State

State提供了唯一的數據公共源，所有共享的數據都要統一放到store的state進行存儲；

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count:0, //在state中存儲一個count數據},
})

訪問State數據

方式一：$store.state.數據名

由于 Vuex 的狀態存儲是響應式的，從 store 實例中讀取狀態最簡單的方法就是在計算屬性 (computed)中返回某個狀態：

<template><div> <p>從state中拿到的{{conut}}</p><!-- 或者--><p>從state中拿到的{{$store.state.count}}</p></div>
</template><script>
export default {computed: {conut() {return this.$store.state.count}},
}
</script>
<style></style>

方式二：mapState 輔助函數

當一個組件需要獲取多個狀態的時候，將這些狀態都聲明為計算屬性會有些重復和冗余。為了解決這個問題，我們可以使用 mapState 輔助函數幫助我們生成計算屬性，讓你少按幾次鍵：

<template><div> <p>從state中拿到的{{conut}}</p></div>
</template>//從Vuex中按需導入mapState 函數
import { mapState } from 'vuex'<script>
export default {computed: {//將全局數據映射為當前組件的計算屬性...mapState (['conut'])},
}
</script>
<style></style>

Mutation

只有通過Mutation才能變更Store的數據，不能直接在組件中操作Store的數據；
在Mutation統一操作Store的數據雖然比較繁瑣，但是便于集中監控所有數據的變化；
一條重要的原則就是要記住 mutation 必須是同步函數，一些異步函數我們要放到后面講的action中處理；

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count:0, //在state中存儲一個count數據},mutations: {add(state){//變更state中的count數據state.count++}}，
})

觸發Mutation來改變數據

在組件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 輔助函數將組件中的 methods 映射為 store.commit 調用。

<template><div> <p>從state中拿到的{{$store.state.count}}</p><button @click = "addCount"></button></div>
</template>//從Vuex中按需導入mapMutations函數
import {mapMutations} from 'vuex'<script>
export default {methods:{// 第二種方式：將 `this.addCount()` 映射為 `this.$store.commit('add')`//...mapMutations(['add'])，addCount(){//第一種方式：使用 this.$store.commit('xxx') 提交 mutationthis.$store.commit('add') }}
}
</script>
<style></style>

組件觸發Mutation時傳遞參數

首先要在mutations中寫好接受參數的函數

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count:0, //在state中存儲一個count數據},mutations: {add(state，num){//變更state中的count數據state.count += num}}，
})

組件觸發Mutation調用更改函數并提交參數

<template><div> s<p>從state中拿到的{{$store.state.count}}</p><button @click = "addCount"></button></div>
</template><script>
export default {methods:{addCount(){//第一種方式：使用 this.$store.commit('xxx') 提交 mutationvar num = 5this.$store.commit('add' ，num ) }}
}
</script>
<style></style>

---

Action

Action用于處理異步任務
如果通過異步操作變更數據，必須通過Action
，而不是使用Mutation,但是在Action中還是要通過觸發Mutation的方式間接變更數據。

Action 提交的是 mutation
Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用 context.commit 提交一個 mutation。

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count:0, //在state中存儲一個count數據},mutations: {add(state){//變更state中的count數據state.count++}}，actions:{asyncAdd(context){setTimeout(() => { //這里用定時器假設是異步操作context.commit('add') //這里還是觸發mutations中的add方法更改count數據}, 1000)}}
})

簡化代碼

 actions:{asyncAdd({commit}){setTimeout(() => { commit('add')}, 1000)}}

觸發Action中的異步函數

第一種方式：通過 this.$store.dispatch 方法觸發

  methods:{addCount(){this.$store.dispatch('asyncAdd')}}

第二種方式：mapActions輔助函數

<template><div> <!-- 這里點擊事件可以直接寫成actions函數事件名  --><button @click = "asyncAdd"></button> </div>
</template>//從Vuex中按需導入mapActions函數
import { mapActions} from 'vuex'<script>
export default {methods: {//將指定的actions函數，映射為當前組件的methods函數...mapActions(['asyncAdd'])},
}
</script>

觸發Action異步時攜帶參數

首先要先更改一下mutations和actions中的函數

mutations: {add(state,num){//變更state中的count數據state.count += num}
}，
actions:{asyncAdd({commit},num){setTimeout(() => { commit('add',num)}, 1000)}}

然后還是通過 this.$store.dispatch 方法觸發

  methods:{addCount(){var num = 5this.$store.dispatch('asyncAdd',num )}}

---

Getter

Getter用于對Store中的數據進行加工處理形成新的數據；

Getter可以對Store中已有的數據進行加工處理形成新的數據，類似Vue的計算屬性
Store中的數據發生變化，Getter的數據也會跟著發生變化
Getter的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {count:0, //在state中存儲一個count數據},getters: {newCount:state => {return  ‘最新值是’+ state.count}}
})

訪問Getter的數據

第一種方式：通過 this.$store.getters方法觸發

  computed:{count(){return  this.$store.getters. newCount}}

第二種方式：mapActions輔助函數

//從Vuex中按需導入mapGetters 函數
import { mapGetters } from 'vuex'<script>
export default {computed: {//將 store 中的 getter 映射到組件計算屬性...mapGetters (['newCount'])},
}
</script>