diff --git a/src/guide/state-management.md b/src/guide/state-management.md index d06ad2ed..9bb55630 100644 --- a/src/guide/state-management.md +++ b/src/guide/state-management.md @@ -2,7 +2,7 @@ ## 公式の Flux ライクな実装 -大規模なアプリケーションは、たくさんのコンポーネント上に複数の状態が散らばっていることや、それらのコンポーネント間の相互作用が原因となって、複雑になりがちです。この問題を解消するために、Vue は Elm に触発された状態管理ライブラリの [vuex](https://github.com/vuejs/vuex) を提供しています。これは [vue-devtools](https://github.com/vuejs/vue-devtools) とも連携し、特別なセットアップなしで[タイムトラベルデバッグ](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif)を提供します。 +大規模なアプリケーションは、たくさんのコンポーネント上に複数の状態が散らばっていることや、それらのコンポーネント間の相互作用が原因となって、複雑になりがちです。この問題を解消するために、Vue は Elm に触発された状態管理ライブラリの [Vuex](https://next.vuex.vuejs.org/) を提供しています。これは [vue-devtools](https://github.com/vuejs/vue-devtools) とも連携し、特別なセットアップなしで[タイムトラベルデバッグ](https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif)を提供します。 ### React 開発者向けの情報 @@ -13,17 +13,19 @@ Vue アプリケーションの情報源となっているのがリアクティブな `data` オブジェクト、すなわち、`data` オブジェクトへのアクセスのみをプロキシするコンポーネントインスタンスであることは見過ごされがちです。それゆえに、複数のインスタンスで共有されるべき状態がある場合、オブジェクトをリアクティブにするために [reactive](/guide/reactivity-fundamentals.html#declaring-reactive-state) 関数を利用できます: ```js -const sourceOfTruth = Vue.reactive({ +const { createApp, reactive } = Vue + +const sourceOfTruth = reactive({ message: 'Hello' }) -const appA = Vue.createApp({ +const appA = createApp({ data() { return sourceOfTruth } }).mount('#app-a') -const appB = Vue.createApp({ +const appB = createApp({ data() { return sourceOfTruth } @@ -39,7 +41,7 @@ const appB = Vue.createApp({ このようにすることで `sourceOfTruth` が変化するたびに、`appA` と `appB` の両方がそれぞれの view を自動的に更新します。いま、唯一の情報源を持っていることにはなりますが、デバッグは悪夢になるでしょう。あらゆるデータが、アプリケーションのどこからでも、そしていつでも、トレースを残すことなく変更できてしまうのです。 ```js -const appB = Vue.createApp({ +const appB = createApp({ data() { return sourceOfTruth }, @@ -55,7 +57,7 @@ const appB = Vue.createApp({ const store = { debug: true, - state: Vue.reactive({ + state: reactive({ message: 'Hello!' }), @@ -88,7 +90,7 @@ Store の状態を変化させる action がすべて store 自身の中にあ ``` ```js -const appA = Vue.createApp({ +const appA = createApp({ data() { return { privateState: {}, @@ -100,7 +102,7 @@ const appA = Vue.createApp({ } }).mount('#app-a') -const appB = Vue.createApp({ +const appB = createApp({ data() { return { privateState: {}, @@ -118,4 +120,4 @@ action によって、元の状態を保持するオブジェクトを置き換 store が保持する状態をコンポーネントが直接的に変更することを禁止し、代わりにコンポーネントが store に通知するイベントを送ることによってアクションを実行する、という規約を発展させていくに従って、最終的に [Flux](https://facebook.github.io/flux/) アーキテクチャに辿り着きました。この規約による利点としては、store に起こるすべての状態変化を記録することができたり、変更ログやスナップショット、履歴や時間の巻き戻しといった高度なデバッギングヘルパーを実装できることが挙げられます。 -ここまで来ると一周まわって [Vuex](https://github.com/vuejs/vuex) に戻ってきました。ここまで読み進めてきたのなら、vuex を試してみるとよいでしょう! +ここまで来ると一周まわって [Vuex](https://next.vuex.vuejs.org/) に戻ってきました。ここまで読み進めてきたのなら、vuex を試してみるとよいでしょう!