複数のコンポーネントから特定のパスへのデータの投稿

Question

私はできる限りこれを説明しようとします。私はコンポーネントを持っています。/resources/パスと/users/ + uid + /created-resourcesパスにデータを投稿し、newPostKeyと更新を使用します。

また、QuizBuilderコンポーネントもあります。私は/resources/ + newPostKey + /quiz/パスにこのコンポーネントからのデータを投稿したいと思います。しかし、私はResourceInfoで作成した特定のパスからnewPostKeyまたはキーを入手する方法を、QuizBuilderコンポーネントから取得する方法がわかりません。

ここに2つのコンポーネントがあります。まず、ユーザーが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などで1つのページアプリケーションを構築する場合は、前のコンポーネントを後者のコンポーネントに置き換えます。後者はすべてindex.htmlで行われ、リクエストは送信されません（最も単純な状況）。最初のコンポーネントがなくなっても生成されたキーを把握しておくには、2つのコンポーネントの共通の親に保存する必要があります。具体的には、親のデータにkeyを追加し、生成されたキーを使用してResourceInfoにカスタムイベントを発行させ、親にそのキーを設定するよう通知します。 http://vuejs.org/guide/components.html#Using-v-on-with-Custom-Eventsを参照してください。
• ResourceInfoからQuizにジャンプするときにページをリフレッシュして、サーバー側のレンダリング（実際には珍しいはずですが、シングルページの方法と比べてより多くの労力が必要となり、パフォーマンスが劣ります）では、クエリーには関係なく、むしろ簡単です：ResourceInfoが保存された後、キーをURLパラメータとして使用して、ユーザーをクイズにリダイレクトします。 OPのはstore.jsを使用したとき

編集：のlocalStorageは、ページ/セッション全体でグローバルにでも利用可能であることから

だけLocalStorageでkey（store.js）を格納し、別のコンポーネントからそれをretriveは動作するはずです。

いくつかの考え：main.js just be the parentはある意味で正しいです。ここには本当の親のvueコンポーネントはありませんが、main.jsはブラウザによってグローバルスコープで評価されるので、main.jsは親アプリのルートエントリです。