Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 5, 2021
Merged

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

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
95add60
fix: update links to point at the Vuex 4 documentation
naokie May 2, 2021
deef14a
docs: swap more examples to destructuring for accessing the global Vue
naokie May 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions src/guide/state-management.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 開発者向けの情報

Expand All @@ -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
}
Expand All @@ -39,7 +41,7 @@ const appB = Vue.createApp({
このようにすることで `sourceOfTruth` が変化するたびに、`appA` と `appB` の両方がそれぞれの view を自動的に更新します。いま、唯一の情報源を持っていることにはなりますが、デバッグは悪夢になるでしょう。あらゆるデータが、アプリケーションのどこからでも、そしていつでも、トレースを残すことなく変更できてしまうのです。

```js
const appB = Vue.createApp({
const appB = createApp({
data() {
return sourceOfTruth
},
Expand All @@ -55,7 +57,7 @@ const appB = Vue.createApp({
const store = {
debug: true,

state: Vue.reactive({
state: reactive({
message: 'Hello!'
}),

Expand Down Expand Up @@ -88,7 +90,7 @@ Store の状態を変化させる action がすべて store 自身の中にあ
```

```js
const appA = Vue.createApp({
const appA = createApp({
data() {
return {
privateState: {},
Expand All @@ -100,7 +102,7 @@ const appA = Vue.createApp({
}
}).mount('#app-a')

const appB = Vue.createApp({
const appB = createApp({
data() {
return {
privateState: {},
Expand All @@ -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 を試してみるとよいでしょう！