Vue と axios を使用してページを更新せずにデータを更新する

Question

Vue と Axios で作成した 2 つのタブ (質問とデータ) を持つページがあります。 最初のタブでフォームに記入して送信します - 保存ボタン v-on:click="save"。

save: function() {
                axios({
                        メソッド: 'パッチ'、
                        URL: URL、
                        データ: this.data
                    })
                    .then(関数 (応答) {
                        this.data = 応答.data;
}

2 番目のタブ (データ) には、保存されたデータのリストがあります。

mounted() {
        アクシオス
            .get('/api/recommended-products/?patient_uuid=' '{{patient.uuid}}')
            .then(response => (this.data= response.data.results))
       }

これで、[質問] タブの回答を変更すると、[データ] タブのリストが自動的に変更されるはずです。ページを更新すると変更されます - Mounted() は機能します。 updateList() 関数を作成してみました:

updateList: function() {
            アクシオス
                .get('/api/recommended-products/?patient_uuid=' '{{patient.uuid}}')
                .then(response => (this.data= response.data.results))
}

それを save() 関数に追加します。例:

save: function() {
                axios({
                        メソッド: 'パッチ'、
                        URL: URL、
                        データ: this.data
                    })
                    .then(関数 (応答) {
                        this.data = 応答.data;
this.updateList();
}

問題は、この方法が 2 回目でも機能することです (機能する場合もあれば、機能しない場合もあります)。そこで、location.reload(); を save() に追加しましたが、このアプローチは好きではありません。ページを更新せずにデータリストを更新することはできますか? updateList() 関数の何が間違っているのでしょうか?

Answer 1

私の意見では、vuex とそのゲッターを使用する必要があります。

この方法では、すべてのアプリケーションにわたってリクエストが 1 つだけになり、ステータスが更新されるとデータが自動的に更新されます。

その後、 計算された プロパティを使用してデータにアクセスできます。このプロパティは、状態が更新されると自動的に再レン​​ダリングされます。

---

以下は複数のタブの使用例です: https://codesandbox.io/s/vuex-axios-demo-forked-m0cqe4?file=/src/App.vue

この例では、JsonPlaceHolder API を介して投稿情報を読み込みます。

毎回フォームを再送信します (関数を使用)。ストア操作を呼び出して状態を更新すると、ゲッターによるデータの再レンダリングがトリガーされます。

注: 最初の投稿をデフォルト値 1 で Mounted にロードしました。