2019.04.18 vuex 的學習及應用

咱們都知道組件之間的傳值，有父組件傳子組件、子組件傳父組件、兄弟組件之間傳值。可是若是個組件均不是以上狀況的兩個組件怎麼傳值呢，這就須要咱們學習的 vuex 來解決。

1. 什麼是 vuex？

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。簡單點說，就是一個工具，能夠管理（修改或者設置）全部組件用到的數據，並且不須要藉助以前的event bus 或者 props 在組件之間傳值。

2.vuex 的核心

 

 store（一個容器對象，儲存vuex 中的 state mutations actions getters）

2.1  state (一個保存數據的對象，對象中的數據能夠供全部組件使用)

 1 // 1. 定義
 2 const state = {
 3   count: 0
 4 }
 5 
 6 // 2. 獲取state中的值
 7 this.$store.state.count
 8 
 9 // mapState 輔助函數獲取多個state的值
10 import { mapState } from 'vuex'
11 computed: mapState({
12     // 箭頭函數可以使代碼更簡練
13     count: state => state.count,
14     // 傳字符串參數 'count' 等同於 `state => state.count`
15     countAlias: 'count',
16 })
17 computed: mapState([
18   // 映射 this.count 爲 store.state.count
19   'count'
20 ])
21 
22 // 3. 與組件的計算屬性混合使用
23 computed: {
24   localComputed () { /* ... */ },
25   // 使用對象展開運算符將此對象混入到外部對象中
26   ...mapState({
27     // ...
28   })
29 }

2.2   mutations(一個對象，保存的是更改state的函數，也只有它能更改state中的值，觸發方式this.$store.commit('函數名',參數))

 1 // 1. 定義
 2 const mutations = {
 3   increment (state) {
 4     state.count++
 5   }
 6 }
 7 
 8 // 2. 觸發
 9 this.$store.commit('increment')
10 
11 // 3. 傳遞參數，一般參數應該是一個對象
12 mutations: {
13   increment (state, n) {
14     state.count += n
15   }
16 }
17 this.$store.commit('increment', 10)
18 
19 // 4. 在組件的方法中使用
20   methods: {
21     ...mapMutations([
22       'increment', // 將 `this.increment()` 映射爲 `this.$store.commit('increment')`
23 
24       // `mapMutations` 也支持載荷：
25       'incrementBy' // 將 `this.incrementBy(amount)` 映射爲 `this.$store.commit('incrementBy', amount)`
26     ]),
27     ...mapMutations({
28       add: 'increment' // 將 `this.add()` 映射爲 `this.$store.commit('increment')`
29     })
30   }

2.3    actions(一個對象，保存的是觸發mutations的函數，讓mutations去修改state中的值) 

 1 // 1. 定義
 2 const actions = {
 3   increment: ({ commit }) => commit('increment')
 4 }
 5 
 6 // 2. 觸發
 7 this.$store.dispatch('increment')
 8 
 9 // 3. 參數支持
10 this.$store.dispatch('incrementAsync', {
11   amount: 10
12 })
13 
14 // 4. 組件的方法中使用
15   methods: {
16     ...mapActions([
17       'increment', // 將 `this.increment()` 映射爲 `this.$store.dispatch('increment')`
18 
19       // `mapActions` 也支持載荷：
20       'incrementBy' // 將 `this.incrementBy(amount)` 映射爲 `this.$store.dispatch('incrementBy', amount)`
21     ]),
22     ...mapActions({
23       add: 'increment' // 將 `this.add()` 映射爲 `this.$store.dispatch('increment')`
24     })
25   }

2.4  getters(一個對象，保存的是一些相似與計算屬性的函數，能夠經過他們獲得任何依賴於state的新的數據)

 1 // 1. 定義
 2 const getters = {
 3   evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
 4 }
 5 
 6 // 2. 使用
 7 this.$store.getters.evenOrOdd
 8 
 9 // 3. 使用其餘getters做爲參數
10 getters: {
11   // ...
12   doneTodosCount: (state, getters) => {
13     return getters.doneTodos.length
14   }
15 }
16 
17 // 4. 組件內使用
18 export default {
19   // ...
20   computed: {
21   // 使用對象展開運算符將 getter 混入 computed 對象中
22     ...mapGetters([
23       'doneTodosCount',
24       'anotherGetter',
25       // ...
26     ])
27   }
28 }

 

3.  vuex 的使用

3.1  安裝 vuex：  npm install vuex -S

3.2 使用方法：

 1 // store.js
 2 import Vue from 'vue'
 3 import Vuex from 'vuex'
 4 
 5 Vue.use(Vuex)
 6 const state = {}
 7 const mutations = {}
 8 const actions = {}
 9 const getters = {}
10 export default new Vuex.Store({
11   state,
12   getters,
13   actions,
14   mutations
15 })
16 
17 // app.js
18 import store from './store'
19 
20 new Vue({
21   el: '#app',
22   store,
23   render: h => h(Counter)
24 })