Middleware processing between actions and mutation.

[xuchenchenBoy]

What problem does this feature solve?

When executing the request action, the unified processing of the mutation method that needs to be performed is performed. This reduces a lot of repetitive code and is more concise and elegant.

What does the proposed API look like?

const store = new Vuex.Store({
  ...
  mutations: {
    loading: state => { state.status = 1 },
    success: state => { state.status = 2 },
    error: state => { state.status = 3 }
  },
  actions: { 
    requestStatus (store, params) {
      const action = {
      types: ['loading', 'success', 'error'],
      promise: fetch('your url'),
      params
    }
    actionMiddleware(action, store) // I must call this function every time, unless a middleware function is provided. 
    },
  },
  actionMiddleware // The actionMiddleware can be added here.
});   

This is actionMiddleware:

const actionMiddleware = (action, store) => {
  const { types, promise } = action
  if (types) {
    const [loading, success, error] = types
    store.commit(loading)

    promise.then((res) => {
      store.commit(success, res)
    })
    .catch(() => {
      store.commit(error)
    })
  } else {
    store.commit(action.type)
  }
}

[lmiller1990]

It is possible to make a plugin to do this. See https://vuex.vuejs.org/en/plugins.html. They are like redux middlewares, which seems to be what you are looking for

See the top:

const myPlugin = store => {
  // called when the store is initialized
  store.subscribe((mutation, state) => {
    // called after every mutation.
    // The mutation comes in the format of { type, payload }.
  })
}

You can check for the type of mutation (such as loading) then do some stuff. Although for what you want, I think a simple utility function might be enough, or a plugin if you really want. I wrote a little about this topic recently, check here, which basically does what you are asking for.

[LinusBorg]

@lmiller1990 acutally plugin run after the commit, so that doesn't allow what @xuchenchenBoy is asking for.

[deini]

Not sure if I understand this correctly, might be related to #929?

[LinusBorg]

It seems to be, yes

[xuchenchenBoy]

@lmiller1990 Thanks, but i want to deal with mutation before it is executed.

[xuchenchenBoy]

@deini Yes, you are right.

[blooddrunk]

Does Vuex have some similar mechanism like redux middleware so that I can manipulate payload of mutations before they're committed?

[lmiller1990]

I don't think you can achieve that using Vuex out of the box. That's the same question @xuchenchenBoy asks above.

[xuchenchenBoy]

@blooddrunk See #929.