我们在使用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了

Logo

前往低代码交流专区

更多推荐