javascript - 在 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 似乎将对象作为字符串输出，但其行为类似于此组件中的对象。

有谁知道我如何将对象提交到此操作？

标签： javascriptvue.jsvuex

Answer 1

而不是console.log("object passed = " + payload)使用console.log("object passed = ", payload)，你应该看到你的对象。用于payload.filters读取有效载荷内的对象