无法从 Vue 组件获取所需的数据对象答案

【问题标题】：Cannot Get Required Data Object From Vue Component无法从 Vue 组件获取所需的数据对象
【发布时间】：2020-07-01 20:42:00
【问题描述】：

我一直在做一个 vue 项目。我有一个组件Subreddit.vue。该组件在模板中包含一个表单，该表单从表单中获取数据并将该数据传递到名为post 的对象中。然后在提交表单时调用的方法 onCreatePost() 将其传递给存储文件 subreddit.js，该文件有一个名为 createPost(post) 的操作，该操作接受 post 对象并获取它的文档引用并将数据插入数据库。

Subreddit.vue的代码：

<template>
  <section>
    <h1>{{ $route.params.name }}</h1>
    <form @submit.prevent="onCreatePost()">
      <b-field label="Title">
        <b-input v-model="post.title"></b-input>
      </b-field>
      <b-field label="Description">
        <b-input type="textarea" v-model="post.description"></b-input>
      </b-field>
      <b-field label="URL" >
        <b-input v-model="post.URL" type="url"></b-input>
      </b-field>
      <button class="button is-success">Add Post</button>
    </form>
  </section>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  data() {
    return {
      post: {
        title: '',
        description: '',
        URL: '',
      },
    };
  },
  computed: mapState('subreddit', ['posts']),
  methods: {
    ...mapActions('subreddit', ['createPost']),
    async onCreatePost() {
      if (this.post.title && (this.post.description || this.post.URL)) {
        await this.createPost(this.post);
        console.log(this.post); // eslint-disable-line no-console
      }
    },
  },
};
</script>

店铺代码subreddit.js：

import { firestoreAction } from 'vuexfire'; // eslint-disable-line no-unused-vars
import db from '@/db';

const posts = db.collection('posts');

const state = {
  posts: [],
};

const actions = {
  async createPost(post) { // eslint-disable-line no-unused-vars
    console.log(post) // eslint-disable-line no-console
    const result = posts.doc();
    // eslint-disable-next-line no-param-reassign
    post.id = result.id;
    const postDoc = posts.doc(post.id);
    await postDoc.set(post);
  },
};

export default {
  namespaced: true,
  state,
  actions,
};

理论上，当我console.log(post)（store subreddit.js 中createPost() 的参数，其值是从给定的 vue 组件接收的）时，它应该包含一个对象，其中包含我从给定组件接收到的数据.但是它会返回：

{getters: {…}, state: {…}, rootGetters: {…}, dispatch: ƒ, commit: ƒ, …}
commit: ƒ (_type, _payload, _options)
dispatch: ƒ (_type, _payload, _options)
getters: {}
id: "N5S3uQvzTrGHnkZTuqMh"
rootGetters: {}
rootState:
auth: (...)
subreddit: (...)
subreddits: (...)
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get auth: ƒ reactiveGetter()
set auth: ƒ reactiveSetter(newVal)
get subreddit: ƒ reactiveGetter()
set subreddit: ƒ reactiveSetter(newVal)
get subreddits: ƒ reactiveGetter()
set subreddits: ƒ reactiveSetter(newVal)
__proto__: Object
state: {__ob__: Observer}
__proto__: Object

我无法理解返回的这个对象，也没有我在组件中传递的任何数据。我如何获得这些数据？请帮忙。

【问题讨论】：

标签： json vuejs2 google-cloud-firestore vuex

【解决方案1】：

当您从模板引用处理程序方法时，您不应该使用 ()，而只是方法的名称。尝试改变

@submit.prevent="onCreatePost()" 到 @submit.prevent="onCreatePost"

【讨论】：

所以让他们删除。 :) 尝试将 console.log 放在 await 之前并分别记录 this.post 的每个属性以强制评估对象并查看传递给操作的内容。控制台日志本身就是一个异步函数，所以它不会在调用的那一刻准确地记录对象。
按照您的建议，我已删除括号并将console.log 放在onCreatePost() 中的await 之前。我在那里得到了正确的值，但问题仍然存在，我收到一个新错误Function DocumentReference.set() called with invalid data. Unsupported field value: a function。
那一定是firestore的问题，我不知道firestore api很遗憾，所以我不能再帮你了。检查他们的文档，了解您在操作中使用的方法。

【解决方案2】：

正如@Eggon 在 cmets 中为他的回答所建议的那样，这确实是 firestore 的问题。显然，如果您发送到 Firestore 数据库的 JSON 对象中的属性不完整，那么数据库将不允许您将数据输入到自身中。那只是一个假设。我可能是错的，但我尝试了所有方法并认为它没用并返回编码项目，错误完全消失了，我能够进入数据库。该项目在我的GitHub 上，如果您需要查看。

【讨论】：