javascript - 将数据从多个组件发布到特定路径

Question

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

我还有一个QuizBuilder成分。我想将此组件的数据发布到 /resources/ + newPostKey + /quiz/小路。但是，我不知道如何获得 newPostKey或来 self 在ResourceInfo中创建的特定路径的 key 来自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 ，您需要将其保存在两个组件的公共(public)父组件上。具体来说，在父级数据中添加一个 key，并让 ResourceInfo 使用生成的键发出自定义事件，以通知父级设置其键。请参阅http://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events .
• 如果从ResourceInfo跳转到Quiz时刷新页面，使用服务器端渲染(这种情况应该很少见，因为与单页方式相比需要更多的精力，并且性能较差)，那么它是与 vue 无关并且相当简单:保存 ResourceInfo 后将用户重定向到 Quiz，并将 key 作为 url 参数。

使用store.js编辑OP:

只需将 key 存储在 LocalStorage(store.js) 中并从另一个组件检索它就应该可以工作，因为 LocalStorage 是全局可用的，甚至跨页面/ session 。

一些想法:main.js 只是父级 在某种意义上是正确的。这里没有真正的父 vue 组件，但是我们的 main.js 是由浏览器在全局范围内评估的，因此 main.js 确实是我们应用程序的根条目，也称为父级。