Vuex上にあるAPIの戻り値をVue.jsコンポーネントに値を送りたい

Question

Vuex上にAPIが存在し、サーバー側から取得した値を、Vueコンポーネントに送りたいのですが、方法がわかりません。どのようにしたら良いのでしょうか。

import Vue from 'vue'
import Vuex from 'vuex'
import module1 from '@/store/modules/module1.js'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    module1,
  },
  plugins: [createPersistedState({
    key: 'test',
    storage: window.sessionStorage
  })]
})

import axios from "axios";
export default {
  namespaced: true,
  state: {
  },
  mutations: {
  },
  actions: {
    validate(context, params) {
      axios
        .post('http://example.com/api/XXXX', params,
          {
            headers: {
              "Content-Type": "application/json",
            },
          })
        .then((response) => {
        }).catch((error) => {
          if (error.response.data && error.response.data.errors) {
            // ここでエラーメッセージをVueコンポーネントに送信したい
            this.$emit("errors", error.response.data.errors);
          }
        })
    }
  }
}

<template>
  <div>
    <div>{{ errors }}</div> <!-- エラーメッセージを表示 -->
    <input type="text" name="data1" v-model="data1" />
    <input type="text" name="data2" v-model="data2" />
    <button @click="validate()">バリデーション</button>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component
export default class Form extends Vue {
  private data1 = "";
  private data2 = "";

  validate() {
    this.$store.dispatch("validate", {
      data1: this.data1,
      data2: this.data2
    });
  }
}
</script>

Answer 1

1. state にエラーをセットする
2. callbackを受け取りエラーを渡す
3. Promise を返す

やり方はいろいろありそうですが、3が良いんじゃないかと思います。

vuex

validate (context, params) {
  return new Promise((resolve, reject) => {
    axios.post('http://example.com/api/XXXX', params, {
      headers: {
        "Content-Type": "application/json",
      },
    })
    .then((response) => {
      resolve(response)
    }).catch((error) => {
      // サーバーは2xx以外のステータスコードを返す必要があります
      reject(error)
    })
  })
}

component

this.$store.dispatch("validate", {
  data1: this.data1,
  data2: this.data2
}).then((response) => {
  console.log("エラーはありません")
  console.log(response)
}).catch((error) => {
  console.log("エラーがあります")
  console.log(error)
})

Comments

[退会済みユーザー]

ありがとうございました！
いろいろ検討した結果、ご提案頂いた、Promiseを返す方法をとろうと思います。