Vuex: Only one parameter works when dispatching actions.

[ajbeach2]

I have some actions in my existing code base on the version 1.x of Vuex where I dispatch actions with multiple parameters. These are now broken in Vuex 2.0 because only the first parameter is defined. For example:

if you type "string1, string2" in the input field, it will send multiple parameters to the dispatch function, however the second argument is undefined, and thus the state is not updated as intended. See the jsfiddle below.

Is this the intended behavior, to only have a single payload parameter?

http://jsfiddle.net/5sH6A/728/

const store = new Vuex.Store({
  state: {
    data1: null,
    data2: null
  },
  mutations: {
    setdatas (state, data1, data2) {
      Vue.set(state, 'data1',  data1)
      Vue.set(state, 'data2',  data2)
    }
  },
  actions: {
    setSplitData (context, data1, data2) {
      console.log(data2) // this is always undefined
      context.commit('setdatas', data1, data2)
    }
  }
})

const MyComponent = {
  template: `<div><input @input="splitData"></input><pre>{{ datas }}</pre></div>`,
  computed: {
    datas () {
      return JSON.stringify(store.state, undefined, 2)
    }
  },
  methods: {
    splitData(e){
        var data = e.target.value.split(',')
        console.log(data)
      store.dispatch('setSplitData', data[0], data[1])
    }
  }
}

new Vue({
    el: '#app',
        store, 
    components: {
        MyComponent
    }
})

[LinusBorg]

In your specific case, I would simply pass the data array?

anyway, yes - store.dispatch() only accepts one argument, and your action function will only receive one (after the general first context argument)

To pass more arguments, add the parameters to an object or array:

store.dispatch('setSplitData',[data[0], data [1]])

// in the action:
setSplitData (context, [data1, data2]) { // uses ES6 argument destructuring

//...or with an object:
store.dispatch('setSplitData',{ 
  data1: data[0], 
  data2: data [1],
})

// in the action:
setSplitData (context, { data1, data2 }) { // uses ES6 argument destructuring

This makes function argument independent of order and availability, and you can see in the function call what the arguments are called in the function definition later.

[taoliujun]

@LinusBorg yeah! "To pass more arguments, add the parameters to an object or array:"

[magisters-org]

One more question, maybe off topic, but when i console log arguments in action function, i got [0] argument - context, [1] - passed data, and more interesting [2] - undefined in all cases. Why this happens, i'm a little bit confused about this, all works perfectly, but why arguments have undefined value?

[LinusBorg]

Because sometime between now and the start of this issue, we introduced an optional third argument for actions, useful only inside modules:

https://vuex.vuejs.org/en/modules.html

[magisters-org]

@LinusBorg Oh, i see, it's for namespaced actions ( {root: true}, as third argument ). Thank you for response ^_^!

[adamtheadmin]

You'd think that in the es6 world where we have the spread operator that this would have been fixed long ago. Passing in an array to dispatch simply is not as appealing as passing multiple arguments.

[ilyakamens]

I just got bitten by this - this is especially confusing when the second arg is a boolean that's defaulted to true - passing in false still results in the arg being true. I thought I was going crazy.