Guide > Scaling Up > State Management の翻訳を追従 (#306)

* fix: update links to point at the Vuex 4 documentation

vuejs/docs@0e5b678#diff-e1a9e26e68d5a2cb4623864fbd565e0f3b01a6e17de1d884678f5130c64d52cd

* docs: swap more examples to destructuring for accessing the global Vue

vuejs/docs@e5b34b2#diff-e1a9e26e68d5a2cb4623864fbd565e0f3b01a6e17de1d884678f5130c64d52cd

Author: naokie

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 を試してみるとよいでしょう！