Skip to content

Translate v2 docs in Japanese. #428

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.

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 83 commits into from
Dec 5, 2016
Merged
Show file tree
Hide file tree
Changes from 48 commits
Commits
Show all changes
83 commits
Select commit Hold shift + click to select a range
c29078a
Starting japanese translation.
kitak Oct 29, 2016
0a1d6b6
Move intro.md from v1.0
kitak Oct 29, 2016
f6436b9
Installation.md in Japanese
tadyjp Oct 31, 2016
f311ca0
translate headers
tadyjp Oct 31, 2016
084e85e
Copy docs/en/getting-started.md from 1.0
inouetakuya Nov 11, 2016
917f4ce
Copy docs/en/getting-started.md from 2.0, understanding diff 1.0 and 2.0
inouetakuya Nov 11, 2016
0be72fa
Copy docs/ja/getting-started.md from 1.0
inouetakuya Nov 11, 2016
f371744
Translated the part of getting-started.md which has no diff 1.0 and 2.0
inouetakuya Nov 11, 2016
5322189
Translate getting-started.md
inouetakuya Nov 11, 2016
98d2902
Make getting-started.md more readable
inouetakuya Nov 11, 2016
d93f15b
Tiny change
inouetakuya Nov 11, 2016
aa9d6dc
Translate intro
kitak Nov 20, 2016
ed57506
translate intro
kitak Oct 29, 2016
ab7a095
Copy docs/en/getters.md to ja
inouetakuya Nov 22, 2016
373e5ad
Translate getters.md
inouetakuya Nov 22, 2016
f756709
Translate mapGetters helper
inouetakuya Nov 22, 2016
ccdccb7
Copy docs/en/mutations.md from 1.0
inouetakuya Nov 22, 2016
5f91077
Copy docs/en/mutations.md from 2.0, understanding diff 1.0 and 2.0
inouetakuya Nov 22, 2016
aff1ab5
Copy docs/ja/mutations.md from 1.0
inouetakuya Nov 22, 2016
52f02b6
Translate mutations.md
inouetakuya Nov 22, 2016
bde44a0
Delete unnecessary rows
inouetakuya Nov 23, 2016
9387983
Copy actions.md from 1.0
inouetakuya Nov 23, 2016
84e162b
Copy actions.md from 2.0, understanding diff 1.0 and 2.0
inouetakuya Nov 23, 2016
fc4fc68
Copy docs/ja/actions.md from 1.0
inouetakuya Nov 23, 2016
4b220d0
Translate state
kitak Nov 23, 2016
d381f87
Translate dispatching actions
inouetakuya Nov 23, 2016
d245499
Translate actions.md
inouetakuya Nov 23, 2016
43a6b6e
Merge branch 'translate-ja' of github.com:kitak/vuex into translate-ja
inouetakuya Nov 23, 2016
575fe13
Copy docs/en/modules.md to docs/ja/modules.md
inouetakuya Nov 23, 2016
cea0371
Translate modules.md
inouetakuya Nov 23, 2016
e0927c1
Translate title of docs/ja/modules.md
inouetakuya Nov 23, 2016
b855aa8
Copy docs/en/structure.md of 1.0 to docs/ja/structure.md
inouetakuya Nov 23, 2016
4bd7b11
Copy docs/en/structure.md of 2.0, understanding diff 1.0 and 2.0
inouetakuya Nov 23, 2016
446d71b
Copy version 1.0 of docs/ja/structure.md
inouetakuya Nov 23, 2016
073e7fb
Translate structure.md
inouetakuya Nov 23, 2016
37bdc43
Copy docs/en/testing.md of 1.0 to docs/ja/testing.md
inouetakuya Nov 23, 2016
153225d
Copy docs/en/testing.md of 2.0, understanding diff 1.0 and 2.0
inouetakuya Nov 23, 2016
f6376ea
Copy version 1.0 of docs/ja/testing.md
inouetakuya Nov 23, 2016
1a47bb7
Translate testing mutations
inouetakuya Nov 23, 2016
6924e0a
Translate testing actions
inouetakuya Nov 23, 2016
fd0eaa4
Translate docs/ja/testing.md
inouetakuya Nov 23, 2016
7f7dd64
Copy docs/en/strict.md 1.0 to docs/ja/strict.md
inouetakuya Nov 23, 2016
b53765b
Copy version 1.0 of docs/ja/strict.md
inouetakuya Nov 23, 2016
64286b7
Translate strict.md
inouetakuya Nov 23, 2016
f0fce02
Add hot-reload
kitak Nov 25, 2016
f9ababe
Translate plugins
kitak Nov 25, 2016
dce2205
Translate forms
kitak Nov 26, 2016
8315d4e
Translate SUMMARY
kitak Nov 27, 2016
5a8a51c
Improve intro
kitak Nov 27, 2016
d1f3d60
Improve
kitak Nov 27, 2016
5074893
Improve translation of resolve
inouetakuya Nov 28, 2016
4f50e78
Improve translation of actions.md
inouetakuya Nov 28, 2016
4f735fd
Fix translation of docs/ja/getters.md
inouetakuya Nov 28, 2016
c0b9eb4
Cut off the broken link
inouetakuya Nov 28, 2016
652ef82
Fix typo
inouetakuya Nov 28, 2016
d43c6d2
Improve translation
inouetakuya Nov 28, 2016
23442b8
Improve
kitak Nov 28, 2016
f0e08f6
Improve intro translation
kitak Nov 28, 2016
18cd3b5
Improve translation
kitak Nov 28, 2016
c40ccc7
Improve
kitak Nov 28, 2016
f494098
Improve
kitak Nov 28, 2016
badae50
Link to old japanese document
kitak Nov 28, 2016
0482067
Reflect review by @ktsn
inouetakuya Nov 29, 2016
1b299c0
Reflect #470
inouetakuya Nov 29, 2016
b794c32
Reflect #438
inouetakuya Nov 29, 2016
bef0264
Reflect change of actions.md in #421
inouetakuya Nov 29, 2016
c0b7cbb
Translate docs/ja/api.md
kimikimi714 Nov 29, 2016
657185e
Merge branch 'translate-ja' of ssh://github.com/kitak/vuex into trans…
kimikimi714 Nov 29, 2016
5b9a8e4
Replace プロミス with Promise
kimikimi714 Nov 30, 2016
9c94f93
Improve translation of 'expose'
kimikimi714 Nov 30, 2016
cafbb47
Improve translation of 'component methods options'
kimikimi714 Nov 30, 2016
e755323
Fix indent
kimikimi714 Nov 30, 2016
808c3ba
Improve translation
kimikimi714 Nov 30, 2016
9c2fcba
Replace Vue store with ストア
kimikimi714 Dec 1, 2016
ac3dede
Improve transration
kimikimi714 Dec 1, 2016
dbc71f9
Fix arguments of dispatch and watch
kimikimi714 Dec 1, 2016
acf740d
Improve translation
kimikimi714 Dec 1, 2016
b981ffc
Fix indent
kimikimi714 Dec 1, 2016
a615dd6
Improve translation
kimikimi714 Dec 1, 2016
64e72c4
Improve translation
kimikimi714 Dec 1, 2016
07b5df3
Improve translation
kimikimi714 Dec 3, 2016
5634911
Merge branch 'dev' into translate-ja
kitak Dec 5, 2016
cfba71e
Add README.md and book.json
kitak Dec 5, 2016
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
1 change: 0 additions & 1 deletion docs/en/getters.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

# Getters

Sometimes we may need to compute derived state based on store state, for example filtering through a list of items and counting them:
Expand Down
22 changes: 22 additions & 0 deletions docs/ja/SUMMARY.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
# Vuex

> 注意: これは [email protected] のドキュメントです

- [1.0のドキュメントをお探しですか?](https://github.com/vuejs/vuex/tree/1.0/docs)
- [リリースノート](https://github.com/vuejs/vuex/releases)
- [インストール](installation.md)
- [Vuex とは何か?](intro.md)
- [Vuex 入門](getting-started.md)
- コアコンセプト
- [ステート](state.md)
- [ゲッター](getters.md)
- [ミューテーション](mutations.md)
- [アクション](actions.md)
- [モジュール](modules.md)
- [アプリケーションの構造](structure.md)
- [プラグイン](plugins.md)
- [厳格モード](strict.md)
- [フォームの扱い](forms.md)
- [テスト](testing.md)
- [ホットリローディング](hot-reload.md)
- [API リファレンス](api.md)
174 changes: 174 additions & 0 deletions docs/ja/actions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
# アクション

アクションはミューテーションと似ていますが、下記の点で異なります:

- アクションは、状態を変更するのではなく、ミューテーションをコミットします。
- アクションは任意の非同期処理を含むことができます。

シンプルなアクションを登録してみましょう:

``` js
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
```

アクションハンドラはストアインスタンスのメソッドやプロパティのセットと同じものを呼び出せる、コンテキストオブジェクトを受け取ります。したがって `context.commit` を呼び出すことでミューテーションをコミットできます。あるいは `context.state` や `context.getters` で、状態やゲッターにアクセスできます。なぜコンテキストオブジェクトがストアインスタンスそのものではないのかは、後ほど [モジュール](modules.md) で説明します。
Copy link
Contributor Author

@kitak kitak Nov 26, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

「ストアインスタンスのメソッドやプロパティのセットと同じものを呼び出せる」はコンテキストオブジェクトを説明しているので、その後の読点を無くしたほうがいいかもしれません。


実際にはコードを少しシンプルにするために ES2015 の [引数分割束縛(argument destructuring)](https://github.com/lukehoban/es6features#destructuring) がよく使われます(特に `commit` を複数回呼び出す必要があるとき):

``` js
actions: {
increment ({ commit }) {
commit('increment')
}
}
```

### アクションのディスパッチ

アクションは `store.dispatch` がトリガーとなって実行されます:

``` js
store.dispatch('increment')
```

これは一見ばかげて見えるかもしれません。つまり、カウントをインクリメントしたいときに、どうして直接 `store.commit('increment')` を呼び出してミューテーションをコミットしないのか、と。**ミューテーションは同期的でなければならない** というのを覚えていますか?アクションはそうではありません。アクションの中では **非同期** の操作をおこなうことができます。

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

太字の前後に半角スペースを入れて見やすくしたつもりなのですが、他の方が翻訳した箇所及び Vue.js の日本語訳を見るとそのようにしていなかったので、合わせるために半角スペース削除しますー


``` js
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
```

アクションはペイロード形式とオブジェクトスタイルのディスパッチをサポートします:

``` js
// ペイロードを使ってディスパッチする
store.dispatch('incrementAsync', {
amount: 10
})

// オブジェクトを使ってディスパッチする
store.dispatch({
type: 'incrementAsync',
amount: 10
})
```

より実践的な例として、ショッピングカートをチェックアウトするアクションを挙げます。このアクションは **非同期な API の呼び出し** と、**複数のミューテーションのコミット** をします:

``` js
actions: {
checkout ({ commit, state }, payload) {
// 現在のカート内の商品を保存する
const savedCartItems = [...state.cart.added]
// チェックアウトのリクエストを送信し、楽観的にカート内をクリアする
commit(types.CHECKOUT_REQUEST)
// shop API は成功時のコールバックと失敗時のコールバックを受け取る
shop.buyProducts(
products,
// 成功時の処理
() => commit(types.CHECKOUT_SUCCESS),
// 失敗時の処理
() => commit(types.CHECKOUT_FAILURE, savedCartItems)
)
}
}
```

一連の非同期の処理を実行しつつ、ミューテーションのコミットによってのみ副作用(状態の変更)を与えていることに注意してください。

### コンポーネント内でのアクションのディスパッチ

`this.$store.dispatch('xxx')` でコンポーネント内でアクションをディスパッチできます。あるいはコンポーネントのメソッドを `store.dispatch` にマッピングする `mapActions` ヘルパーを使うこともできます(ルートの `store` が必要です):
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここもカッコ内の injection を訳したほうがわかりやすくなるかと思います。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここもカッコ内の injection を訳したほうがわかりやすくなるかと思います。


``` js
import { mapActions } from 'vuex'

export default {
// ...
methods: {
...mapActions([
'increment' // this.increment() を this.$store.dispatch('increment') にマッピングする
]),
...mapActions({
add: 'increment' // this.add() を this.$store.dispatch('increment') にマッピングする
})
}
}
```

### アクションを構成する

アクションはしばしば非同期処理を行いますが、アクションが完了したことをどうやって知れば良いのでしょう?そしてもっと重要なことは、もっと複雑な非同期処理を取り扱うために、どうやって複数のアクションを構成させるかということです。
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

「もっと」が一つの文章の中で続いているので、「さらに」等を使って読みやすくできそうです。


まず知っておくべきことは `store.dispatch` は、トリガーされたアクションハンドラによって返された値を、戻り値として返すということです。したがってアクションの中で Promise を返すようにできます:
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

次のような翻訳はどうでしょうか?
「まず知っておくべきことは、store.dispatch がトリガーされたアクションハンドラによって返された Promise を処理できることと、Promise を返すことです。」

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

分かりやすい!そのまま採用させていただきます!


``` js
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}
```

すると下記のようにできます:

``` js
store.dispatch('actionA').then(() => {
// ...
})
```

また別のアクションで下記のように書くと:

``` js
actions: {
// ...
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
```

最終的には [async / await](https://tc39.github.io/ecmascript-asyncawait/) を使うと、JavaScript はとても素早くランディングを計算でき、複数のアクションを以下のように構成できます:
Copy link
Contributor Author

@kitak kitak Nov 25, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

次のような翻訳はどうでしょうか?
「最終的に JavaScript の機能として近く導入される async /await を使用することで、次のようにアクションを組み合わせることができます:」

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

あああ、ランディングの意味を完全に間違えていました。指摘ありがとうございます。修正しますー


``` js
// assuming getData() and getOtherData() return Promises
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ここのコメント翻訳漏れがあるの見つけました。 👀

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

おっと、修正しますー


actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // actionA が完了するのを待機する
commit('gotOtherData', await getOtherData())
}
}
```

> `store.dispatch` で異なるモジュール内の複数のアクションハンドラをトリガーすることができます。そのようなケースでは、全てのトリガーされたハンドラがリゾルブされたときにリゾルブする Promise が戻り値として返ってくることになります。
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

「リゾルブ」でも通じると思いますが、「解決」のほうがより多く見かける気がします。

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

なるほど承知しました。「解決」にしますー

56 changes: 56 additions & 0 deletions docs/ja/forms.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# フォームのハンドリング
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

目次とタイトルが異なりますね。どちらかに合わせましょう。


厳格モードで Vuex を使用するとき、Vuex に属する状態の一部で `v-model` を使用するのは少しトリッキーです:

``` html
<input v-model="obj.message">
```

`obj` がストアからオブジェクトを返す算出プロパティ (computed property) と仮定すると、`v-model` は input でユーザーが入力するとき、直接 `obj.message` を変更します。厳格モードでは、この変更は明示的に Vuex のミューテーションハンドラ内部で処理されていないため、エラーを投げます。

それに対処するための "Vuex way" は、`<input>` の値をバインディングし、`input` または `change` イベントでアクションを呼び出すことです:

``` html
<input :value="message" @input="updateMessage">
```
``` js
// ...
computed: {
...mapState({
message: state => state.obj.message
})
},
methods: {
updateMessage: ({ dispatch }, e) => {
this.$store.commit('updateMessage', e.target.value)
}
}
```

ミューテーションのハンドラは以下のようになります:

``` js
// ...
mutations: {
updateMessage (state, message) {
state.obj.message = message
}
}
```

### 双方向算出プロパティ

確かに、上記の例は単純な `v-model` と ローカルステートよりもかなり冗長で、`v-model` のいくつかの有用な機能が使えません。代わりに、セッターで双方向算出プロパティを使うアプローチがあります。

``` js
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
```
93 changes: 93 additions & 0 deletions docs/ja/getters.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
# ゲッター

例えば項目のリストをフィルタリングしたりカウントするときのように、ストアの状態を算出したいときがあります。

``` js
computed: {
doneTodosCount () {
return this.$store.state.todos.filter(todo => todo.done).length
}
}
```

もしこの関数を複数のコンポーネントで利用したくなったら、関数をコピーするか、あるいは関数を共用のヘルパーに切り出して複数の場所でインポートする必要があります。- しかし、どちらも理想的とはいえません。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

直前で文章が終わって句点があるので、このハイフンはなくても良いと思います。


Vuex を利用するとストア内に "ゲッター" を定義することができます(ストアのための算出プロパティだと考えてください)。ゲッターはストアを第1引数として受け取ります:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ゲッターはストアを第1引数として受け取ります:

ストアではなくステートですね。


``` js
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
```

ゲッターは `store.getters` オブジェクトから取り出されます:

``` js
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
```

ゲッターは第2引数として他のゲッターを受け取ります:

``` js
getters: {
// ...
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
}
```

``` js
store.getters.doneTodosCount // -> 1
```

どのコンポーネントの内部でも簡単にゲッターを利用することができます:

``` js
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
```

### `mapGetters` ヘルパー

The `mapGetters` helper simply maps store getters to local computed properties:
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

英語の文章が残っていたり、この下のソースコードのコメントが翻訳されていないので、確認をお願いします。

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

はわわ。確認して修正しますー


`mapGetters` ヘルパーはストアのゲッターをローカルの算出プロパティにマッピングさせます:

``` js
import { mapGetters } from 'vuex'

export default {
// ...
computed: {
// mix the getters into computed with object spread operator
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
```

ゲッターを異なる名前でマッピングさせたいときはオブジェクトを使います:

``` js
mapGetters({
// map this.doneCount to store.getters.doneTodosCount
doneCount: 'doneTodosCount'
})
```
44 changes: 44 additions & 0 deletions docs/ja/getting-started.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
# Vuex 入門

Vuex アプリケーションの中心にあるものは**ストア**です。"ストア" は、基本的にアプリケーションの**状態**を保持するコンテナです。単純なグローバルオブジェクトとの違いが 2つあります。

1. Vuex ストアはリアクティブです。 Vue コンポーネントがストアから状態を取り出すとき、もしストアの状態が変化したら、ストアはリアクティブかつ効率的に更新を行います。

2. ストアの状態を直接変更することはできません。明示的に**ミューテーションをコミットする**ことによってのみ、ストアの状態を変更します。これによって、全ての状態の変更について追跡可能な記録を残すことが保証され、ツールでのアプリケーションの動作の理解を助けます。
Copy link

@inouetakuya inouetakuya Nov 11, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kitak @tadyjp

  1. You cannot directly mutate the store's state. The only way to change a store's state is by explicitly committing mutations. This ensures every state change leaves a track-able record, and enables tooling that helps us better understand our applications.

I am not really sure about the translation of "committing mutations".

Which do you think is the best?

  • ミューテーションをコミットする
  • ミューテーションを送る
  • another idea?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

メソッド名と対応しているので「ミューテーションをコミットする」が良いと思います。

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ありがとうございます!「ミューテーションをコミットする」でいこうと思います!


### シンプルなストア

> **注意:** 私たちは、このドキュメントのコード例に ES2015 のシンタックスを利用しています。 もし触れたことがなければ、[ぜひ触れてください](https://babeljs.io/docs/learn-es2015/)!このドキュメントは、他に[大規模アプリケーションの構築](https://jp.vuejs.org/guide/application.html)に書かれたコンセプトを既に読まれていることを前提にしています。
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://jp.vuejs.org/guide/application.html が dead link(404)です。
v2のドキュメントには「大規模アプリケーションの構築」というセクション自体がなく、かつ原文からはこの行の後半そのものが削除されているので、原文に合わせてカットすべきと思います。

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

指摘ありがとうございます。カットしますー


Vuex を[インストール](installation.md) してから、ストアをつくってみましょう。Vuex ストアの作成は、とても簡単です。ストアオブジェクトの初期状態と、いくつかのミューテーションを準備するだけです。

``` js
// module を利用しているときはあらかじめ Vue.use(Vuex) を呼び出していることを確認しておいてください
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

module は Vuex module とまぎらわしいので、installation にあったようにモジュールシステムと訳すのはいかがでしょうか?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

なるほど、たしかにまぎらわしいですね。モジュールシステムにしますー


const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
```

これで `store.state` でストアオブジェクトの状態を参照でき、また `store.commit` メソッドで状態の変更を行うことができます。

``` js
store.commit('increment')

console.log(store.state.count) // -> 1
```

そして `store.state.count` を直接変更する代わりにミューテーションをコミットする理由は、状態の変更を明確に追跡したいからです。このシンプルな規約は、あなたのコードの意図をさらに明確にし、コードを読んだ時にアプリケーションの状態の変更について、論理的に考えることができるようにします。加えて、私たちに全ての変更のログを取ったり、状態のスナップショットを取ったり、タイムトラベルデバッグを行うようなツールを実装する余地を与えてくれます。

ストアオブジェクトの状態はリアクティブなので、コンポーネント内のストアの状態は、演算されたプロパティ内の状態を返します。コンポーネントメソッドでミューテーションをコミットすることによって状態の変更を行います。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Vue の computed property は日本語訳だと算出プロパティなので、それに合わせるのが良いかと思います。

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

前半に関して、「...リアクティブなので、ストアの状態をコンポーネント内で使うには算出プロパティ内でただ状態を返せば良いです」
みたいな訳はどうでしょうか?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

算出プロパティに合わせますー

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

「...リアクティブなので、ストアの状態をコンポーネント内で使うには算出プロパティ内でただ状態を返せば良いです」

分かりやすいです!そのまま採用させていただきます!


こちらが [Vuex を使った最も基本的なカウンターアプリの例](https://jsfiddle.net/yyx990803/n9jmu5v7/)です。

これから Vuex のコアコンセプトについて詳しく説明していきます。まずは[ステート](state.md)からはじめましょう。
Loading