Vuex狀態管理工具詳解

自己重新整理了下，方便學習交流。

首先Vuex它是什麼，此處從官網截圖：

可以集中式存儲管理應用的所有組件狀態

使用

1.安裝vuex依賴包。

npm install vuex --save

2.創建一個store的文件夾，裏面新建一個index.js文件，專門來處理vuex的數據，邏輯。
3.導入vuex包，創建store對象。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        num: 3
    },
    mutations: {
        addNum() {
            this.state.num++
        }
    },
    actions: {
        addNumAsync(context) {
            setTimeout(() => {
                context.commit('addNum')
            }, 3000)
        }
    },
    getters: {
        showNum: state => {
            console.log(state)
            return '當前vuex裏面的數據爲【' + state.num + '】'
        }
    },

})

4.在main.js引入store.js將store對象掛載到vue實例中

import store from './store'

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

State

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

在各個組件中訪問State數據的方式

第一種方式：

使用差值表達式的方法，把這條數據放進去。

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

第二種方式

//1.從vuex中導入mapState函數
import { mapState } form 'vuex'

//2.通過導入的mapState函數，將當前組件需要的全部數據，映射爲當前組件的computed計算屬性：
computed:{
    ...mapState(['count'])
}

Mutation

這裏在vuex中只能通過Mutation用於變更Store數據，不可以直接操作Store中的數據，主要是爲了可以集中監控所有的數據的變化，在這個裏面不能寫異步的代碼。

在各個組件中觸發Mutation的方式:

第一種方式：

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

第二種方式：

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

//2.通過導入的mapMutations函數，將需要的mutations函數，映射爲當前組件的methods方法就可以直接使用
methods: {
    ...mapMutations(['addNum'])
}

Action

用於處理異步任務

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

在各個組件中觸發Action的方式:

第一種方式：

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

第二種方式：

//1.從vuex中導入mapActions函數
import { mapActions } from 'vuex'
//通過剛纔導入的mapActions函數，將需要的actions函數，映射爲當前組件的methods方法就可以直接使用
methods:{
    ...mapActions(['addNumAsync'])
}

觸發actions異步任務時攜帶參數，在定義的時候就要先定義好。
定義：

actions: {
        addNAsync(context,step) {
            setTimeout(() => {
                context.commit('addN',step)
            },1000)
        }
    }

觸發：

this.$store.dispatch('addNAsync',5)

Getter

它可以對store中已有的數據加工處理之後形成新的數據，類似Vue的計算屬性，當store中數據發送變化，Getter的數據也會跟着變化

在各個組件中使用Getter的方式:

第一種方式：

this.$store.getters.名稱

第二種方式：

//1.從vuex中導入mapGetters 函數
import { mapGetters } from 'vuex'
//通過剛纔導入的mapGetters 函數，映射爲當前組件的computed方法就可以直接使用
computed:{
    ...mapGetters(['showNum'])
}

Module

將 store 分割成模塊（module）。每個模塊擁有自己的 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 的狀態

可以去官網查看
https://vuex.vuejs.org/zh/guide/modules.html

我個人使用的話一般都是使用第一種方式，步驟少，直接使用

 //訪問State數據的方式:
this.$store.state.全局數據名稱
 //觸發Mutation的方式:
this.$store.commit('定義的方法名')
 //觸發Action的方式:
this.$store.dispatch('定義的方法名')
 //使用Getter的方式:
this.$store.getters.名稱

Module就很少用

個人水平有限，有問題歡迎大家留言指導，僅供學習和參考。

學海無涯！努力二字，共勉！