-
-
Notifications
You must be signed in to change notification settings - Fork 9.6k
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
Changes from 48 commits
c29078a
0a1d6b6
f6436b9
f311ca0
084e85e
917f4ce
0be72fa
f371744
5322189
98d2902
d93f15b
aa9d6dc
ed57506
ab7a095
373e5ad
f756709
ccdccb7
5f91077
aff1ab5
52f02b6
bde44a0
9387983
84e162b
fc4fc68
4b220d0
d381f87
d245499
43a6b6e
575fe13
cea0371
e0927c1
b855aa8
4bd7b11
446d71b
073e7fb
37bdc43
153225d
f6376ea
1a47bb7
6924e0a
fd0eaa4
7f7dd64
b53765b
64286b7
f0fce02
f9ababe
dce2205
8315d4e
5a8a51c
d1f3d60
5074893
4f50e78
4f735fd
c0b9eb4
652ef82
d43c6d2
23442b8
f0e08f6
18cd3b5
c40ccc7
f494098
badae50
0482067
1b299c0
b794c32
bef0264
c0b7cbb
657185e
5b9a8e4
9c94f93
cafbb47
e755323
808c3ba
9c2fcba
ac3dede
dbc71f9
acf740d
b981ffc
a615dd6
64e72c4
07b5df3
5634911
cfba71e
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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) |
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) で説明します。 | ||
|
||
実際にはコードを少しシンプルにするために 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')` を呼び出してミューテーションをコミットしないのか、と。**ミューテーションは同期的でなければならない** というのを覚えていますか?アクションはそうではありません。アクションの中では **非同期** の操作をおこなうことができます。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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` が必要です): | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ここもカッコ内の injection を訳したほうがわかりやすくなるかと思います。 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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') にマッピングする | ||
}) | ||
} | ||
} | ||
``` | ||
|
||
### アクションを構成する | ||
|
||
アクションはしばしば非同期処理を行いますが、アクションが完了したことをどうやって知れば良いのでしょう?そしてもっと重要なことは、もっと複雑な非同期処理を取り扱うために、どうやって複数のアクションを構成させるかということです。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 「もっと」が一つの文章の中で続いているので、「さらに」等を使って読みやすくできそうです。 |
||
|
||
まず知っておくべきことは `store.dispatch` は、トリガーされたアクションハンドラによって返された値を、戻り値として返すということです。したがってアクションの中で Promise を返すようにできます: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 次のような翻訳はどうでしょうか? There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 はとても素早くランディングを計算でき、複数のアクションを以下のように構成できます: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 次のような翻訳はどうでしょうか? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. あああ、ランディングの意味を完全に間違えていました。指摘ありがとうございます。修正しますー |
||
|
||
``` js | ||
// assuming getData() and getOtherData() return Promises | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. ここのコメント翻訳漏れがあるの見つけました。 👀 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 が戻り値として返ってくることになります。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 「リゾルブ」でも通じると思いますが、「解決」のほうがより多く見かける気がします。 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. なるほど承知しました。「解決」にしますー |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
# フォームのハンドリング | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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) | ||
} | ||
} | ||
} | ||
``` |
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 | ||
} | ||
} | ||
``` | ||
|
||
もしこの関数を複数のコンポーネントで利用したくなったら、関数をコピーするか、あるいは関数を共用のヘルパーに切り出して複数の場所でインポートする必要があります。- しかし、どちらも理想的とはいえません。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 直前で文章が終わって句点があるので、このハイフンはなくても良いと思います。 |
||
|
||
Vuex を利用するとストア内に "ゲッター" を定義することができます(ストアのための算出プロパティだと考えてください)。ゲッターはストアを第1引数として受け取ります: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
ストアではなくステートですね。 |
||
|
||
``` 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: | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 英語の文章が残っていたり、この下のソースコードのコメントが翻訳されていないので、確認をお願いします。 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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' | ||
}) | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
# Vuex 入門 | ||
|
||
Vuex アプリケーションの中心にあるものは**ストア**です。"ストア" は、基本的にアプリケーションの**状態**を保持するコンテナです。単純なグローバルオブジェクトとの違いが 2つあります。 | ||
|
||
1. Vuex ストアはリアクティブです。 Vue コンポーネントがストアから状態を取り出すとき、もしストアの状態が変化したら、ストアはリアクティブかつ効率的に更新を行います。 | ||
|
||
2. ストアの状態を直接変更することはできません。明示的に**ミューテーションをコミットする**ことによってのみ、ストアの状態を変更します。これによって、全ての状態の変更について追跡可能な記録を残すことが保証され、ツールでのアプリケーションの動作の理解を助けます。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
I am not really sure about the translation of "committing mutations". Which do you think is the best?
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. メソッド名と対応しているので「ミューテーションをコミットする」が良いと思います。 There was a problem hiding this comment. Choose a reason for hiding this commentThe 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)に書かれたコンセプトを既に読まれていることを前提にしています。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. https://jp.vuejs.org/guide/application.html が dead link(404)です。 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 指摘ありがとうございます。カットしますー |
||
|
||
Vuex を[インストール](installation.md) してから、ストアをつくってみましょう。Vuex ストアの作成は、とても簡単です。ストアオブジェクトの初期状態と、いくつかのミューテーションを準備するだけです。 | ||
|
||
``` js | ||
// module を利用しているときはあらかじめ Vue.use(Vuex) を呼び出していることを確認しておいてください | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. module は Vuex module とまぎらわしいので、installation にあったようにモジュールシステムと訳すのはいかがでしょうか? There was a problem hiding this comment. Choose a reason for hiding this commentThe 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` を直接変更する代わりにミューテーションをコミットする理由は、状態の変更を明確に追跡したいからです。このシンプルな規約は、あなたのコードの意図をさらに明確にし、コードを読んだ時にアプリケーションの状態の変更について、論理的に考えることができるようにします。加えて、私たちに全ての変更のログを取ったり、状態のスナップショットを取ったり、タイムトラベルデバッグを行うようなツールを実装する余地を与えてくれます。 | ||
|
||
ストアオブジェクトの状態はリアクティブなので、コンポーネント内のストアの状態は、演算されたプロパティ内の状態を返します。コンポーネントメソッドでミューテーションをコミットすることによって状態の変更を行います。 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Vue の computed property は日本語訳だと算出プロパティなので、それに合わせるのが良いかと思います。 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 前半に関して、「...リアクティブなので、ストアの状態をコンポーネント内で使うには算出プロパティ内でただ状態を返せば良いです」 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 算出プロパティに合わせますー There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
分かりやすいです!そのまま採用させていただきます! |
||
|
||
こちらが [Vuex を使った最も基本的なカウンターアプリの例](https://jsfiddle.net/yyx990803/n9jmu5v7/)です。 | ||
|
||
これから Vuex のコアコンセプトについて詳しく説明していきます。まずは[ステート](state.md)からはじめましょう。 |
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
「ストアインスタンスのメソッドやプロパティのセットと同じものを呼び出せる」はコンテキストオブジェクトを説明しているので、その後の読点を無くしたほうがいいかもしれません。