質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Q&A

解決済

1回答

4329閲覧

(Vuex) 非同期処理を、actionsに書くか各コンポーネントに書くか分ける基準について

morguri

総合スコア46

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

0グッド

3クリップ

投稿2018/12/03 06:50

編集2018/12/03 14:18

例えば、以下のような連続で行われる2つのajax処理があったとします。

1).DBからアイテムデータを消す(削除用APIを叩く)
2).1の処理がthenの場合、消した後のアイテムデータをDBより再取得し、mutationsを呼びstateにアイテムデータをセット(取得用のAPIを叩き、その後mutationsを呼ぶ)

1の処理はmutationsを呼ばないという意味でstateに関係ありませんが
2の処理はmutationsを呼ぶためstateに関係あります。

このような場合
1の処理は各コンポーネントに書いて
2の処理はストア内のactionsに書くのが一般的でしょうか。

または、最終的にstateに関連する部分なので
全部actions内に書くのが一般的でしょうか。
(公式にはアクションを繋げて書くやり方も書いてありますが)

例として他にあげるなら、新規ユーザ登録用のAPIとかも気になります。
(これは登録用コンポーネントに書いても良い気がしますが)

actions内に処理が少ないようであれば全部actionsに書くなど
規模などにもよる部分もあるかと思いますが、気になったので質問させて頂きました。

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Vuex公式サイトのアクションのページには、

アクションは、状態を変更するのではなく、ミューテーションをコミットします。

と書かれています。
つまり、アクションの結果をミューテーションして状態を変更するのであれば、「DBからアイテムデータを消す」という非同期処理はアクションとして妥当です。

また、Vuexを使用するのは、状態(とその操作)の一元管理のためですので、「DBからアイテムデータを消す」という動作が、あるコンポーネントに特有である場合を除いては、アクションとして登録しておいた方がいいと思います。後々「こっちのコンポーネントからもアイテムを削除できるようにしよう」といった変化にも対応しやすくなると思います。

Vuexを使用した状態で、コンポーネント自体に状態(data)とその操作(methods)を定義するのは、当該の状態がコンポーネントの寿命と一致する場合などです(例:一時的に表示されるコンポーネントのスタイル管理のフラグなど)。

投稿2018/12/10 14:41

NozomuIkuta

総合スコア1260

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

morguri

2018/12/11 09:07 編集

・後々「こっちのコンポーネントからもアイテムを削除できるようにしよう」といった変化にも対応しやすくなる ・コンポーネント自体に状態(data)とその操作(methods)を定義するのは、当該の状態がコンポーネントの寿命と一致する場合など 上記2点あたりを意識して、一貫した設計にしたいと思います。 ご回答いただきありがとうございます。
NozomuIkuta

2018/12/11 10:12

参考になったようでよかったです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問