actions
Vuexでは非同期です。呼び出し側の関数(アクションの開始者)にアクションが完了したことを知らせる唯一の方法は、Promiseを返して後で解決することです。
次に例を示しmyAction
ます。を返し、Promise
http呼び出しを行い、後者を解決または拒否しPromise
ます-すべて非同期で
actions: {
myAction(context, data) {
return new Promise((resolve, reject) => {
// Do something here... lets say, a http call using vue-resource
this.$http("/api/something").then(response => {
// http success, call the mutator and change something in state
resolve(response); // Let the calling function know that http is done. You may send some data back
}, error => {
// http failed, let the calling function know that action did not work out
reject(error);
})
})
}
}
これで、Vueコンポーネントがを開始myAction
すると、このPromiseオブジェクトを取得して、成功したかどうかを知ることができます。Vueコンポーネントのサンプルコードを以下に示します。
export default {
mounted: function() {
// This component just got created. Lets fetch some data here using an action
this.$store.dispatch("myAction").then(response => {
console.log("Got some data, now lets show something in this component")
}, error => {
console.error("Got nothing from server. Prompt user to check internet connection and try again")
})
}
}
上記のように、actions
を返すことはにとって非常に有益ですPromise
。そうしないと、アクションの開始者が何が起こっているのか、そしてユーザーインターフェイスに何かを表示するのに十分安定していることを知る方法がありません。
そして最後の注意mutators
-あなたが正しく指摘したように、それらは同期しています。それらはの内容を変更し、state
通常はから呼び出されactions
ます。ミックスする必要はありませんPromises
しmutators
て、actions
その部分ハンドルが。
編集:単方向データフローのVuexサイクルに関する私の見解:
this.$store.state["your data key"]
コンポーネントのようにデータにアクセスする場合、データフローは単方向です。
アクションからの約束は、アクションが完了したことをコンポーネントに知らせることだけです。
コンポーネントは、上記の例のプロミス解決関数からデータを取得するか(単方向ではないため、推奨されません)、直接そこから$store.state["your data key"]
単方向であり、vuexデータのライフサイクルに従います。
上記の段落ではVue.set(state, "your data key", http_data)
、アクションでhttp呼び出しが完了すると、ミューテーターがを使用することを前提としています。