I've been trying to send an object to a Vuex action, but for some reason it isn't working as expected.
The purpose of this action is to take an object, iterate through its properties, and generate a string that will be used to filter results in an API request.
Here is my component setup:
data() {
return {
usersData: [],
modals: {
removeUser: false,
id: "",
filterSearch: false
},
filters: {
role: "user",
active: "true",
search: "",
pageSize: "",
page: ""
}
};
},
mounted() {
this.getUsers();
},
methods: {
getUsers() {
console.log("Object before passing = " + this.filters);
var params = this.$store.dispatch('getQueryString', this.filters);
}
}
store.js
import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
Vue.use(Vuex);
Vue.use(axios);
export default new Vuex.Store({
state: { },
mutations: { },
actions: {
getQueryString(payload) {
console.log("Object passed = " + payload);
let queryString = "";
let counter = 0;
for (var key in payload) {
if (payload[key]) {
let connector = (counter > 0) ? "&" : "?";
queryString += connector + key + "=" + payload[key];
counter++;
}
}
return queryString;
}
},
When I check the console, it displays:
Object before passing = [object Object]Is there anyone who knows how to successfully pass the object to this action?