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())
  }
}