Vuex

Vuex 概述

Vuex 是什麼
Vuex 是實現組件全局狀態（數據）管理的一種機制，可以方便的實現組件之間數據的共享。

使用 Vuex 統一管理狀態的好處
1、 能夠在 vuex 中集中管理共享的數據，易於開發和後期維護
2、 能夠高效地實現組件之間的數據共享，提高開發效率
3、 存儲在 vuex 中的數據都是響應式的，能夠實時保持數據與頁面的同步

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

Vuex 的基本使用

1. 安裝 vuex 依賴包

  npm install vuex --save 

2. 導入 vuex 包

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

3. 創建 store 對象

const store = new Vuex.Store({ 
     // state 中存放的就是全局共享的數據 
     state: { count: 0 } 
 }) 

4. 將 store 對象掛載到 vue 實例中

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

Vuex 的核心概念

Vuex 中的主要核心概念如下：
State、Mutation、Action、Getter

State

State提供唯一的公共數據源，所有共享的數據都要統一放到Store中的State中存儲
例如，打開項目中的store.js文件，在State對象中可以添加我們要共享的數據，如：count:0
在組件中訪問State的方式：
1).this.$store.state.全局數據名稱 如：this.$store.state.count
2).先按需導入mapState函數： import { mapState } from ‘vuex’ 然後數據映射爲計算屬性：
computed:{ …mapState([‘全局數據名稱’]) }

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

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

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

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

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

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

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

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

Mutation
Mutation 用於變更 Store中 的數據
1、只能通過 mutation 變更 Store 數據，不可以直接操作 Store 中的數據。
2、 通過這種方式雖然操作起來稍微繁瑣一些，但是可以集中監控所有數據的變化。

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


 // 觸發mutation 
  methods: { 
    handle1() { 
      // 觸發 mutations 的第一種方式 
      this.$store.commit('add') 
    },
       handle2() { 
    // 觸發 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']) 
} 

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

 // 定義 Action 
   const store = new Vuex.Store({   
     // ...省略其他代碼   
       mutations: { 
      add(state) {     
         state.count++     
           }    
         },    
      actions: {    
      addAsync5(context) {
      setTimeout(() => {
        //actions不能直接修改state中的數據
        //必須通過 context.commit()觸發某個mutations
        context.commit('sub')
      }, 1000)
    },
     addAsync4(context, step) {
      setTimeout(() => {
      //攜帶參數
        context.commit('subN', step)
      }, 2000)
    },
     }  
      })     


// 觸發 Action 
  methods: { 
    handle() { 
      // 觸發 actions 的第一種方式 
      this.$store.dispatch('addAsync') 
    } 
   handle1() { 
      // 在調用 dispatch 函數， 
      // 觸發 actions 時攜帶參數 
      this.$store.dispatch('addAsync4', 5) 
    }    
  }      

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

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

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

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

Getter
Getter 用於對 Store 中的數據進行加工處理形成新的數據。
1、Getter 可以對 Store 中已有的數據加工處理之後形成新的數據，類似 Vue 的計算屬性。 2、 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']) 
}