入門Vuex看這篇就夠了

1.Vuex 概述

1.1傳統組件之間的傳值方式

1. 父向子傳值：父組件通過 props向下傳遞數據給子組件
2. 子向父傳值：v-on 事件綁定
3. 兄弟組件之間共享數據：var hub = new Vue()
   • $on 接收數據的那個組件
   • $emit 發送數據的那個組件

如果當一個組件的關係變得非常複雜當時候，我們要進行數據的傳遞，這樣的話我們我們要進行的工作就會變成麻煩，傳遞一個數據的時候可能要經過很多的組件。這時候就出現了Vuex。

1.2Vuex 是什麼

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。Vuex 是實現組件全局狀態（數據）管理的一種機制，可以方便的實現組件之間數據的共享。

1.3使用 Vuex 統一管理狀態的好處

① 能夠在 vuex 中集中管理共享的數據，易於開發和後期維護
② 能夠高效地實現組件之間的數據共享，提高開發效率
③ 存儲在 vuex 中的數據都是響應式的，能夠實時保持數據與頁面的同步

1.4什麼情況下我應該使用 Vuex？

一般情況下，只有組件之間共享的數據，纔有必要存儲到 vuex 中。
對於組件中的私有數據，依舊存儲在組件自身的 data 中就可以了。

2.Vuex的使用

Vuex的使用主要包括兩部分，那就是Vuex的定義還有Vuex的調用了！
首先，通過一個簡單的例子來讓我們體驗一下Vuex的定義調用方式。

	const store = new Vuex.store({
		state:{
			count:0
		}
		mutations:{
			increment(state){
					state.count++			
			}
		}
})

現在，我們可以通過store.state來獲取狀態對象，也可以通過store.commit方法來觸發狀態的修改。

strore.commit('incremnet');
console.log(sotre.state.count)  // 1

接下來，我們從Vuex的核心概念中依次介紹使用方式。

3.Vuex 的核心概念

Vuex 中的主要核心概念如下：

• State
• Mutation
• Action
• Getter

3.1 State

State 提供唯一的公共數據源，所有共享的數據都要統一放到 Store 的 State 中進行存儲。

  // 創建store數據源，提供唯一公共數據 
  const store = new Vuex.Store({ 
    state: { count: 0 } 
  }) 

3.1.1組件訪問 State 中數據的第一種方式：

this.$store.state.全局數據名稱 

3.1.2組件訪問 State 中數據的第二種方式：

// 1. 從 vuex 中按需導入 mapState 函數 
import { mapState } from 'vuex' 

通過剛纔導入的 mapState 函數，將當前組件需要的全局數據，映射爲當前組件的 computed 計算屬性：

// 2. 將全局數據，映射爲當前組件的計算屬性 
computed: { 
  ...mapState(['count']) 
} 

3.2 Mutation

Mutation 用於變更 Store中 的數據。

雖然我們可以直接進行數據的修改，比如:

this.$store.state.count++

但是這種方法我們並不提倡！正確的方法應該是通過Mutation。

// 定義 Mutation
   const store = new Vuex.Store({  
      state: { 
     	 count: 0   
      },   
      mutations: {    
         add(state) { 
        	// 變更狀態 
        	state.count++     
         }    
     }   
 })       
  

  // 觸發mutation 
  methods: { 
    handle1() { 
      // 觸發 mutations 的第一種方式 
      this.$store.commit('add') 
    } 
  }      

可以在觸發 mutations 時傳遞參數：

  // 定義Mutation 
const store = new Vuex.Store({  
   state: { 
      count: 0  
   },   
   mutations: {   
       addN(state, step) { 
	        // 變更狀態 
	        state.count += step 
       }   
   }
})       
  

 // 觸發mutation 
  methods: { 
    handle2() { 
      // 在調用 commit 函數， 
      // 觸發 mutations 時攜帶參數 
      this.$store.commit('addN', 3) 
    } 
  }     

this.$store.commit() 是觸發 mutations 的第一種方式，觸發 mutations 的第二種方式：

// 1. 從 vuex 中按需導入 mapMutations 函數 
import { mapMutations } from 'vuex'

通過剛纔導入的 mapMutations 函數，將需要的 mutations 函數，映射爲當前組件的 methods 方法：

// 2. 將指定的 mutations 函數，映射爲當前組件的 methods 函數 
methods: { 
  ...mapMutations(['add', 'addN']) 
} 

3.3Action

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

  // 定義 Action
  const store = new Vuex.Store({ 
      // ...省略其他代碼 
  	mutations: { 
      add(state) { 
          state.count++  
      }
    },
    actions: {   
        addAsync(context) {   
           setTimeout(() => {  
              context.commit('add')         
           }, 1000)    
        }      
    } 
 }) 

 // 觸發 Action 
  methods: { 
    handle() { 
      // 觸發 actions 的第一種方式 
      this.$store.dispatch('addAsync') 
    } 
  }  

3.3.1觸發 actions 異步任務時攜帶參數：

  // 定義 Action 
   const store = new Vuex.Store({  
       // ...省略其他代碼
       mutations: { 
     		 addN(state, step) { 
     		         state.count += step  
     		  }     
       }, 
      actions: { 
            addNAsync(context, step) { 
                    setTimeout(() => { 
                              context.commit('addN', step) 
                     }, 1000) 
            } 
     } 
  })      
 

 // 觸發 Action 
  methods: { 
    handle() { 
      // 在調用 dispatch 函數， 
      // 觸發 actions 時攜帶參數 
      this.$store.dispatch('addNAsync', 5) 
    } 
  }      

this.$store.dispatch() 是觸發 actions 的第一種方式，觸發 actions 的第二種方式：

// 1. 從 vuex 中按需導入 mapActions 函數 
import { mapActions } from 'vuex' 

通過剛纔導入的 mapActions 函數，將需要的 actions 函數，映射爲當前組件的 methods 方法：

// 2. 將指定的 actions 函數，映射爲當前組件的 methods 函數 
methods: { 
  ...mapActions(['addASync', 'addNASync']) 
} 

3.4 Getter

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

① Getter 可以對 Store 中已有的數據加工處理之後形成新的數據，類似 Vue 的計算屬性。
② Store 中數據發生變化，Getter 的數據也會跟着變化。

  // 定義 Getter 
  const store = new Vuex.Store({ 
    state: { 
      count: 0 
    }, 
    getters: { 
      showNum: state => { 
        return '當前最新的數量是【'+ state.count +'】' 
      } 
    } 
  })

使用 getters 的第一種方式：

this.$store.getters.名稱 

使用 getters 的第二種方式：

import { mapGetters } from 'vuex' 
 
computed: { 
  ...mapGetters(['showNum']) 
} 

3.5 Moudel

moules存在的意義就是解決狀態樹臃腫的問題。
它允許我們將 store 分割成模塊（module），也就是將狀態樹切割成幾個子狀態樹。那麼在使用上定義modules，即是定義狀態樹（store）。這樣的話每個狀態樹都擁有自己的 state、mutation、action、getter。從而顯得不那麼臃腫。具體使用方法如下：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

---

如果您也正在學習前端的路上，記得關注該博主，學習更多關於前端的知識~

博主主頁 Poetic Code