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

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

Результат, который я получаю из своего console.infos:

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 превращается в объект.

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

файл.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.info("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.info("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.info("API ds:",date_start,"-de",date_end),
    axios.get(`/api/DeviceEvents/connections_interval`, {
        params: {
            date_start: date_start,
            date_end: date_end
        },
    })
)

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
707
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

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

Итак, вы должны пройти

this.connections_interval({date_start,date_end})

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

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.info("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
        }
    }
}

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

      // `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 }) { 
            // ......
        }
    }
}

Спасибо за ваш ответ, это тоже сработало, и я пойду взгляну на документ :)

Quentin_otd 10.04.2019 13:14
Ответ принят как подходящий

Вам нужно принять свою пользовательскую полезную нагрузку в качестве параметра 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.info("store: ", store);
    console.info("Module ds:", date_start"-de",date_end)
    const response = connections_interval(date_start, date_end);
    return response
  }
}

Большое спасибо, это сработало, и ваш ответ был очень точным

Quentin_otd 10.04.2019 13:14

Другие вопросы по теме