Vuex中的action的使用

我们在使用vuex的时候，很多时候都会直接去使用commit代替了dispatch操作,虽然官方的推荐是使用dispatch，但是使用commit也可以，而且很多时候也更加的好写，所以就比较少会去使用dispatch的操作了。但是有的时候，我们还是需要使用dispatch的操作的，这个时候我们就要去设置actions了。
vuex是一个状态管理机制，管理的很多都是我们要公用的数据，在这个组件会用到，在另外一个组件也会用到，并且给出了统一的获取机制跟修改机制，也就是说
如果一个数据是被很多组件使用到得，那么就应该被放入到vuex中
而很多时候，我们会使用一些数据，比如选项集，比如一个医院有什么科室，再比如公司有多少个大区这些。这些数据是比较难改变的，而且一般也不会用来进行修改，只是用作选项集，这个时候我们就可以把这种数据放到vuex里面去。
但是很多时候这种数据是来源于网络的，也就是说我们要请求一次接口才能获取这种数据，这个时候，我们就不能一口气在vuex里面写死了，同时因为在很多地方进行使用，所以我们就要到很多地方去调用接口，这个样子是比较的麻烦的，如果使用commit，那么我们就要在很多地方写回调函数，这样其实不是很适合管理。当然我们也可以把
1、请求接口
2、commit
写在一个函数里面，但是这个样子就跟vuex独立开来了，而且每次都要import，就很不好了
这个时候我们就可以使用actions、为什么不用mutations？因为mutations只可以同步。

那么我们的思路就变成了。dispatch，如果此时state里面有值，就调用commit将原来的值丢进去，如果没有值，就请求接口，然后再把值再回调函数中进行commit，因为actions，是支持异步的。
这样我们就可以直接dispatch就好了。
考虑到其实这个dispatch我们只是用来做init的，其实这个时候我们可以进行统一的命名

state={a,b}
actions={initA}

同时，很多地方其实不会只调用一个选项集，而是会调用多个，这个时候我们就可以使用一个dispatch同时发出多个dispatch了。同时调用接口的时候，这种选项集合很多时候都只会是一个apiName，然后只传入不同的参数就好了，那么其实我们也可以写一个函数，来对这些dispatch函数进行统一的生成。
函数

// init store
export function initCodeStore (actions, codeArr) {
  codeArr.forEach(item => {
    const initSet = `init${item.state.charAt(0).toUpperCase()}${item.state.slice(1)}`
    const commitStore = `set${item.state.charAt(0).toUpperCase()}${item.state.slice(1)}`

    actions[initSet] = async function ({ commit, state }) {
      try {
        let result = state[item.state]
        if (result.length === 0) {
          result = await getCode(item.code)
          result = getKeyValueList(result.rows)
        }
        commit(commitStore, result)
      } catch (err) {
        console.error(err)
      }
    }
  })
}

store

import { initCodeStore } from 'utils/util'

const state = {
  test: '',
}

const getters = {}
Object.keys(state).forEach(prop => {
  getters[prop] = state => state[prop]
})

const mutations = {}
Object.keys(state).forEach(prop => {
  const setProp = `set${prop.charAt(0).toUpperCase()}${prop.slice(1)}`
  mutations[setProp] = (state, payload) => {
    state[prop] = payload
  }
})

const actions = {
  initDispatch ({dispatch}) {
    let arr = [
      dispatch('initTest'),
    ]
    return Promise.all(arr)
  },
}
let initArr = [
  {state: 'test', code: 'test'},

]
initCodeStore(actions, initArr)

export default {
  state,
  getters,
  mutations,
  actions,
}

其中mutations是为了进行统一的处理的这样就可以使用setTest进行commit了。而使用Promise.all来实现并发请求，提高了效率，而我们要使用只需要在我们需要的地方加上

await this.$state.dispatch('initTest')

就好了
可见，当我们需要异步的时候，就需要使用actions跟dispatch了