Vuex系列狀態管理篇--Vuex（4）之Mutations和Actions

1、Vuex – Mutations

對於 State 的 同步操作方法

在根Vuex下

1. 單個參數 或者沒有參數 定義

const mutations = {
  setAppName(state, name) {
    state.appName = name;
  }
}

export default mutations

2. 單個參數 或者 沒有參數 使用 this.$store.commit(mutations名，參數)

handleChangeAppName() {
    this.$store.commit('setAppName', 'pigisduck') // 參數可以不寫
}

3. 多個參數以對象的方式 定義

const mutations = {
  setAppName(state, params) {  // params 指代傳入的參數對象
    state.appName = params.name;
  }
}

export default mutations

4. 多個參數以對象的方式 使用

handleChangeAppName() {
   this.$store.commit({
     type: 'setAppName',
     name: 'PigIsDuck'
   })
 }

5. 如果想要在 State 中 通過Mutations 添加新的字段，可以這樣操作

import vue from "vue";   // 先導入 vue
const mutations = {
  setAppVersion(state, params) {//使用 vue 的方法，纔可以與視圖同步 
    vue.set(state, 'appVersion', params.version)   	
  }  
}

export default mutations

6. 使用 vuex 的工具方法 mapMutations

import { mapState, mapGetters, mapMutations } from "vuex";

 ...mapMutations([
      'setAppName'
 ]),
 handleChangeAppName() {
   this.setAppName({
     name : 'pig'
   })
 }

在模塊下

定義

const mutations = {
setUserName(state, params) {
 state.userName = params.name
}
}

使用

不使用命名空間

import { mapState, mapGetters, mapMutations } from "vuex";

...mapMutations([
'setUserName'
]),
handleChangeUserName() {
this.setUserName({
  name: 'PigIsDUck'
})
}

使用命名空間

// 或者是使用之前提到的 
// import { createNamespacedHelpers } from 'vuex'
// const { mapGetters } = createNamespacedHelpers('user')

...mapMutations('user',[
'setUserName'
]),
handleChangeUserName() {
this.setUserName({
  name: 'PigIsDUck'
})
}

2、Vuex – Actions

對於 State 的 異步操作方法 (調用 Mutations)

在根Vuex下

1. 定義

const actions = {
    // context : 上下文
  updateAppName( context, payload ) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        context.commit('setAppName', payload)
        resolve('成功提交')
      }, 1000);
    })
  }
}

export default actions

• content：Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters

當然，也可以使用 ES 的 參數解構來簡化代碼

updateAppName({ commit }, payload ) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('setAppName', payload)  // 直接使用
        resolve('成功提交')
      }, 1000);
    })

2. 使用 ( dispatch )

handleChangeAppName() {
  this.$store.dispatch({
    type: 'updateAppName',
    name: 'adadasdsad'
  })
}

當然，如果使用 vuex 提供的方法 mapAction 和命名空間的方法，也和Mutations的一樣

3. 最後，如果我們利用 async / await，我們可以如下組合 action：

// 假設 getData() 和 getOtherData() 返回的是 Promise

actions: {
  async actionA ({ commit }) {
    try {
		commit('gotData', await getData())
    }catch( err ){
        console.log(err)
    }
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}