Проблемы с передачей объекта в действие в Vuex

Question

Я пытаюсь передать объект в действие Vuex, но, похоже, он не работает для меня.

Это действие предназначено для того, чтобы взять объект, пройти через него и вывести строку, чтобы перейти кконец API для фильтрации результатов.

Мой компонент:

  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 passed = " + 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 paramString = "";
      let counter = 0;
      for (var key in payload) {
        if (payload[key]) {
          let connector = (counter > 0) ? "&" : "?";
          paramString += connector + key + "=" + payload[key];
          counter++;
        }
      }
      return paramString;
    }
  },

Когда я вывожу его в консоль, он говорит: object before passed = [object Object], поэтому я знаю, что это проблема до того, как объект был передан действию. Кажется, Vue выводит объект в виде строки, но ведет себя как объект в этом компоненте.

Кто-нибудь знает, как я могу передать объект этому действию?

Answer 1

Вместо console.log("object passed = " + payload) используйте console.log("object passed = ", payload), и вы должны увидеть свой объект. Используйте payload.filters для чтения вашего объекта внутри полезной нагрузки