Как передать аргумент функции в VueJS

Question

Я пытаюсь передать два аргумента (время эпохи) в три разные функции в следующем порядке: .vue -> module.js -> api.js, но в функции модуля один из моих аргументов, очевидно, заменяется на объект, и я понятия не имею, почему.

Результат, который я получаю из 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

Что я пробовал до сих пор:

Я попытался изменить значение и повернуть вспять date_start / date_end, но в итоге только date_start превращается в объект.

Вот код, который я использую:

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
        },
    }
}

МКТ-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
        }
    }
}

МКТ-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
        },
    })
)

Если кто-нибудь как-нибудь поймет, почему это замена, то спасет меня, еще раз спасибо за ваше время.

Answer 1

Взгляните на официальные документы :

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

Все действия в Vuex принимают только один аргумент в качестве полезной нагрузки.

Вы можете исправить это так:

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

В модуле:

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

Answer 2

Вам нужно принять пользовательскую полезную нагрузку в качестве параметра Second в методе действия. А так как у вас несколько аргументов, используйте 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 3

По моему опыту, действие в vuex может принимать только один параметр.

Так что вы должны пройти

this.connections_interval({date_start,date_end})

В действие включены первые параметры, передаваемые из хранилища vuex. параметры, которые вы передаете в представлении, должны быть получены во вторых параметрах. Должно быть:

МКТ-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
        }
    }
}