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

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

如果有人知道为什么要替换它，那可以救我，再次感谢您的时间。

Answer 1

根据我的经验，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.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
        }
    }
}

Answer 2

看看official docs：

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

所有actions in 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 3

在操作方法中，您需要接受自定义有效负载作为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
  }
}

如何在VueJS中将参数传递给函数

3 个答案: