おすすめカード情報の受け渡し

[ShimaBee]

結果画面の表示

[ShimaBee]

やりたい事

Railsからおすすめのカード3枚のデータが送られてくるので、aswer.vueで表示する。

手段

Rails側が、おすすめのカード三つをquestion.vueに返してくるので、そのデータをstoreに保存し、answer.vueでstoreにアクセスして、おすすめカードの描画を実現する。

[ShimaBee]

まず、question.vueのsendDataメソットないで、Railsからのデータを受け取る。

sendData() {
      const questions = this.$store.state.questions;
      // 問題を全て回答したら、データを送る処理が行われる
      if (this.count == questions.length) {
      axios
        .post('http://localhost:8080/answers', {
          choices: this.choices
        })
        // Railsからデータを受け取る
        .then(response => {
          console.log(response.data);
        });
      }
    }

[ShimaBee]

Railsからデータを受け取ったデータをstoreに保存する。

store/index.js

export const state = () => {
    return {
        questions: [],
         // answerというstateを追加。
        answer:[]
    }
}
export const mutations={
    SET_QUESTION: function(state,question) {
        state.questions=question;
    },
    // fetchAnswerによって得られたおすすめカード情報を、stateのanswerに書き換える処理を追加。
    SET_ANSWER: function(state,answer) {
        state.answer=answer;
    }
}
export const actions = {
    async fetchQuestion(context) {
        const url = 'http://localhost:8080/questions'
        const result = await axios.get(url);
        context.commit("SET_QUESTION", result.data)
    },
    // question.vueの中のsendDataメソットで取得したおすすめのカード情報である
    // resultを引数に取り、SET_ANSWERにresultを渡し、
    // SET_ANSWERをコミットして、storeの状態を変化させるactionを追加。
    async fetchAnswer(context,result) {
        context.commit("SET_ANSWER", result)
    }
}
`

[ShimaBee]

RailsからのおすすめカードのデータをfetchAnswerの引数に渡す。 その後、fetchAnswerを発火させ、画面を遷移させる。

sendData() {
      const questions = this.$store.state.questions;
      if (this.count == questions.length) {
      axios
        .post('http://localhost:8080/answers', {
          choices: this.choices
        })
        // Railsからおすすめカード情報を取得し、そのデータを引数として
        // fetchAnswerを発火させる。その後、answer.vueに画面遷移させる。
        .then(response => {
          this.$store.dispatch("fetchAnswer",response.data);
          this.$router.push('answer')
        });
      }
    }