Question

好的，我会尽力解释这个问题。我有一个ResourceInfo组件，使用/resources/将数据发布到/users/ + uid + /created-resources路径和newPostKey路径并更新。

我还有一个QuizBuilder组件。我想将此组件中的数据发布到/resources/ + newPostKey + /quiz/路径。但是，我不知道如何从newPostKey组件ResourceInfo中创建的特定路径获取QuizBuilder或密钥。

以下是两个组成部分。首先，用户使用ResourceInfo组件添加信息。一旦他们点击提交，他们就会转到他们创建测验的QuizBuilder组件。

ResourceInfo.vue

export default {
  name: 'resource-info',
  data () {
    return {
      header: 'Before you build your quiz we just need some quick info.',
      sharedState: store.state,
      resource: {
        type: '',
        title: '',
        url: '',
        desc: '',
        timesPassed: 0,
        authorId: store.state.userInfo.uid,
        authorName: store.state.userInfo.displayName,
        authorImage: store.state.userInfo.photoURL
      },
    }
  },
  methods: {
    saveToFirebase () {
      var newPostKey = firebase.database().ref().child('resources').push().key;
      var updates = {};
      updates['/resources/' + newPostKey] = this.resource;
      updates['/users/' + store.state.userInfo.uid + '/created-resources/' + newPostKey] = this.resource;

      // Clear inputs  

      this.resource.title = '',
      this.resource.type = '',
      this.resource.desc = '',
      this.resource.url = ''

      console.log("Saving resource data...")

      return firebase.database().ref().update(updates);

    }
  }
}

QuizBuilder.vue

export default {
  name: "quiz-builder",
    data () {
    return {
      questions: [createNewQuestion()],
      showQuestions: false
    }
  },
  methods: {
    addQuestion () {
        this.questions.push(createNewQuestion())
    },
    addOption (question) {
        question.options.push(createNewOption())
    },
    saveToFirebase (e) {
      e.preventDefault();
      var questions = this.questions;
      this.firebaseRef = db.ref('a/path/here'); // /resources/ + that resources id + /quiz/
      this.firebaseRef.push({ // Should I use set or push here?  
      questions
    })

  console.log('Saving quiz data...')

    }
  }
}

Answer 1

答案取决于组件/页面之间的转换方式。

如果您正在使用vue-router或其他东西构建单页应用，那么转换正在用后者替换前一个组件，这一切都发生在index.html上，没有发送请求（最简单的情况）。为了在第一个组件消失后仍然保持生成的密钥，您需要将它保存在两个组件的公共父组件上。具体而言，在父数据中添加key，并让ResourceInfo使用生成的密钥发出自定义事件，以通知父项设置其密钥。见http://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events。
如果在从ResourceInfo跳转到Quiz时刷新页面，使用服务器端渲染（这应该是非常罕见的，因为与单页方式相比需要更多的努力，并且性能较差），那么它＆＃39;无关紧要而且相当简单：在保存ResourceInfo之后将用户重定向到Quiz，并将密钥作为url参数。

使用store.js

在OP上进行编辑

只需将key存储在LocalStorage（store.js）中，并从其他组件中检索它应该有效，因为LocalStorage在全局甚至跨页/会话都可用。

有些人认为：main.js just be the parent在某种意义上是正确的。这里没有真正的父vue组件，但是我们的main.js是由全局范围内的浏览器唤醒的，所以main.js是我们应用程序的根条目，也就是父类。 / p>

将数据发布到来自多个组件的特定路径

1 个答案: