How to pass argument to a function in VueJS

Question

I'm trying to pass two arguments (epoch time) to three differents function in this order : .vue -> module.js -> api.js, but at the module function one of my argument is apparently replace by an object and i have no idea why.

The result i get from my console.logs :

Vue ds: 1526256000000 -de 1530662400000
Module ds: Object { dispatch: dispatch(), commit: commit(), getters: {},state: {…}, rootGetters: {…}, rootState: {…}-de 1526256000000 mkt-module.js:20
API ds:  Object { dispatch: dispatch(), commit: commit(), getters: {}, state: {…}, rootGetters: {…}, rootState: {…} }-de 1526256000000

What i'v tried so far :

I tried changing the value, and reversing date_start/date_end, but in the end only the date_start is turned into an object.

Here's the code i'm using :

file.vue

 Date Start : <input type="date" v-model="date_start"> - Date End : <input type="date" v-model="date_end"><button type="button" v-on:click="get_connections" class="btn btn-dark">Run</button>
        <p>remote connections : {{ connections }}</p>

    </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
    data () {
        return {
            connections:'...',
            date_start: '2018-07-04',
            date_end: '2018-07-04'
        }
    },
    methods: {
        ...mapActions({
            connections_interval: 'mkt/connections_interval',
        }),
        async get_connections() {

            var date_start = new Date(this.date_start).valueOf() 
            var date_end = new Date(this.date_end).valueOf() 
            console.log("Vue ds:",date_start,"-de",date_end)
            var cons=this.connections_interval(date_start,date_end); // i send the args to the function inside module_mkt.js
            //this.connections=cons
        },
    }
}

mkt-module.js

import { connections_interval } from '@/api/mkt-api'
export default {
    namespaced: true,
    actions: {
        connections_interval(date_start,date_end) {
            console.log("Module ds:",date_start,"-de",date_end)
            const response = connections_interval(date_start,date_end) // i send the args to the function inside mkt-api.js
            return response
        }
    }
}

mkt-api.js

import axios from 'axios'

export const connections_interval = (date_start,date_end) => (
    console.log("API ds:",date_start,"-de",date_end),
    axios.get(`/api/DeviceEvents/connections_interval`, {
        params: {
            date_start: date_start,
            date_end: date_end
        },
    })
)

If anyone as any idea why it is replace it would save me, thanks again for your time.

Answer 1

You need to accept your custom payload as the Second parameter in action method. And since you have multiple arguments so, use Object.

// file.vue

async get_connections() {
  ...
  // send object as arguments
  var cons = this.connections_interval({ date_start, date_end });    
},


// mkt-module.js
actions: {
  // first parameter is store object & second parmeter is your custom payload
  connections_interval(store, { date_start, date_end }) {
    console.log("store: ", store);
    console.log("Module ds:", date_start"-de",date_end)
    const response = connections_interval(date_start, date_end);
    return response
  }
}

Answer 2

Take a look at official docs:

      // `mapActions` also supports payloads:
      'incrementBy' // map `this.incrementBy(amount)` to `this.$store.dispatch('incrementBy', amount)`

All actions in Vuex only accepts one argument as payload.

You can fix it like this:

        async get_connections() {
            // ......
            var cons=this.connections_interval({ date_start, date_end });
           // ......
        },

In module:

import { connections_interval } from '@/api/mkt-api'
export default {
    namespaced: true,
    actions: {
        // KEY LINE
        connections_interval({ date_start, date_end }) { 
            // ......
        }
    }
}

Answer 3

In my experience, the action in vuex can just receive one parameter.

So you have to pass

this.connections_interval({date_start,date_end})

In the action, the first params is included the params that passed from the vuex store. the params you pass in the view should be get in the second params. It should be:

mkt-module.js

import { connections_interval } from '@/api/mkt-api'
export default {
    namespaced: true,
    actions: {
        connections_interval({ dispatch, commit, state}, {date_start,date_end}) {
            console.log("Module ds:",date_start,"-de",date_end)
            const response = connections_interval(date_start,date_end) // i send the args to the function inside mkt-api.js
            return response
        }
    }
}