Skip to content

Commit 5c0050b

Browse files
kazuponktsn
authored andcommitted
update ja docs (#879)
* tweak getters.md from #791 * tweak some sections from #794 * translation about SSR notice at modules section (ref: #809) * translation getters section (ref: #831) * tweak testing section from #844
1 parent 7f2049f commit 5c0050b

File tree

6 files changed

+25
-22
lines changed

6 files changed

+25
-22
lines changed

docs/ja/actions.md

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,12 @@ export default {
106106
// ...
107107
methods: {
108108
...mapActions([
109-
'increment' // this.increment() を this.$store.dispatch('increment') にマッピングする
109+
'increment', // `this.increment()` を `this.$store.dispatch('increment')` にマッピングする
110+
// `mapActions` もペイロードをサポートする:
111+
'incrementBy' // `this.incrementBy(amount)` を `this.$store.dispatch('incrementBy', amount)` にマッピングする
110112
]),
111113
...mapActions({
112-
add: 'increment' // this.add() を this.$store.dispatch('increment') にマッピングする
114+
add: 'increment' // `this.add()``this.$store.dispatch('increment')` にマッピングする
113115
})
114116
}
115117
}
@@ -158,14 +160,14 @@ actions: {
158160
最終的に JavaScript の機能として近く導入される [async / await](https://tc39.github.io/ecmascript-asyncawait/) を使用することで、次のようにアクションを組み合わせることができます:
159161

160162
``` js
161-
// getData() と getOtherData() が Promise を返すことを想定している
163+
// `getData()``getOtherData()` が Promise を返すことを想定している
162164

163165
actions: {
164166
async actionA ({ commit }) {
165167
commit('gotData', await getData())
166168
},
167169
async actionB ({ dispatch, commit }) {
168-
await dispatch('actionA') // actionA が完了するのを待機する
170+
await dispatch('actionA') // `actionA` が完了するのを待機する
169171
commit('gotOtherData', await getOtherData())
170172
}
171173
}

docs/ja/getters.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ computed: {
1212

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

15-
Vuex を利用するとストア内に "ゲッター" を定義することができます(ストアのための算出プロパティだと考えてください)。ゲッターはステート(状態)を第1引数として受け取ります:
15+
Vuex を利用するとストア内に "ゲッター" を定義することができます。それらをストアの算出プロパティと考えることができます。算出プロパティと同様に、ゲッターの結果はその依存関係に基づいて計算され、依存関係の一部が変更されたときにのみ再評価されます。
16+
17+
ゲッターは第1引数として、state を受け取ります:
1618

1719
``` js
1820
const store = new Vuex.Store({
@@ -100,7 +102,7 @@ export default {
100102

101103
``` js
102104
...mapGetters({
103-
// this.doneCount を store.getters.doneTodosCount にマッピングさせる
105+
// `this.doneCount``store.getters.doneTodosCount` にマッピングさせる
104106
doneCount: 'doneTodosCount'
105107
})
106108
```

docs/ja/modules.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ const store = new Vuex.Store({
2525
}
2626
})
2727

28-
store.state.a // -> moduleA のステート
29-
store.state.b // -> moduleB のステート
28+
store.state.a // -> `moduleA` のステート
29+
store.state.b // -> `moduleB` のステート
3030
```
3131

3232
### モジュールのローカルステート
@@ -38,7 +38,7 @@ const moduleA = {
3838
state: { count: 0 },
3939
mutations: {
4040
increment (state) {
41-
// state はモジュールのローカルステート
41+
// `state` はモジュールのローカルステート
4242
state.count++
4343
}
4444
},
@@ -251,7 +251,7 @@ store.registerModule(['nested', 'myModule'], {
251251
- 同じモジュールを使用する複数のストアを作成する;
252252
- 同じストアに同じモジュールを複数回登録する
253253

254-
モジュールの状態を宣言するために単純なオブジェクトを使用すると、その状態オブジェクトは参照によって共有され、変更時にクロスストア/モジュールの状態汚染を引き起こします。
254+
モジュールの状態を宣言するために単純なオブジェクトを使用すると、その状態オブジェクトは参照によって共有され、変更時にクロスストア/モジュールの状態汚染を引き起こします。(例: `runInNewContext` オプションが `false` または `'once'` のとき、[SSR ではステートフルなシングルトンは避けます](https://ssr.vuejs.org/ja/structure.html#ステートフルなシングルトンの回避)。)
255255

256256
これは、実際には Vue コンポーネント内部の `data` と全く同じ問題です。従って解決策も同じです。モジュールの状態を宣言するために関数を使用してください (2.3.0 以降でサポートされます):
257257

docs/ja/mutations.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const store = new Vuex.Store({
1616
})
1717
```
1818

19-
直接ミューテーションハンドラを呼び出すことはできません。この mutations オプションは、どちらかいうと "タイプが `increment` のミューテーションがトリガーされたときに、このハンドラが呼ばれる" といったイベント登録のようなものです。ミューテーションハンドラを起動するためにはミューテーションのタイプを指定して **store.commit** を呼び出す必要があります:
19+
直接ミューテーションハンドラを呼び出すことはできません。この mutations オプションは、どちらかいうと "タイプが `increment` のミューテーションがトリガーされたときに、このハンドラが呼ばれる" といったイベント登録のようなものです。ミューテーションハンドラを起動するためにはミューテーションのタイプを指定して `store.commit` を呼び出す必要があります:
2020

2121
``` js
2222
store.commit('increment')
@@ -165,13 +165,13 @@ export default {
165165
// ...
166166
methods: {
167167
...mapMutations([
168-
'increment', // this.increment() を this.$store.commit('increment') にマッピングする
168+
'increment', // `this.increment()``this.$store.commit('increment')` にマッピングする
169169
170170
// mapMutations はペイロードサポートする:
171-
'incrementBy' // this.incrementBy(amount) を this.$store.commit('incrementBy', amount) にマッピングする
171+
'incrementBy' // `this.incrementBy(amount)``this.$store.commit('incrementBy', amount)` にマッピングする
172172
]),
173173
...mapMutations({
174-
add: 'increment' // this.add() を this.$store.commit('increment') にマッピングする
174+
add: 'increment' // `this.add()``this.$store.commit('increment')` にマッピングする
175175
})
176176
}
177177
}

docs/ja/plugins.md

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const myPlugin = store => {
77
// ストアが初期化されたときに呼ばれます
88
store.subscribe((mutation, state) => {
99
// それぞれのミューテーションの後に呼ばれます
10-
// ミューテーションは { type, payload } の形式で提供されます
10+
// ミューテーションは `{ type, payload }` の形式で提供されます
1111
})
1212
}
1313
```
@@ -62,7 +62,7 @@ const myPluginWithSnapshot = store => {
6262
store.subscribe((mutation, state) => {
6363
let nextState = _.cloneDeep(state)
6464

65-
// 以前の状態と以後の状態を比較...
65+
// `prevState` と `nextState` を比較...
6666

6767
// 次のミューテーションのために状態を保存
6868
prevState = nextState
@@ -103,9 +103,8 @@ const store = new Vuex.Store({
103103
const logger = createLogger({
104104
collapsed: false, // ログ出力されたミューテーションを自動で展開します
105105
filter (mutation, stateBefore, stateAfter) {
106-
// ミューテーションを記録する必要がある場合は、true を返します
107-
// returns true if a mutation should be logged
108-
// `mutation` は { type, payload } です
106+
// ミューテーションを記録する必要がある場合は、`true` を返します
107+
// `mutation` は `{ type, payload }` です
109108
return mutation.type !== "aBlacklistedMutation"
110109
},
111110
transformer (state) {
@@ -114,7 +113,7 @@ const logger = createLogger({
114113
return state.subTree
115114
},
116115
mutationTransformer (mutation) {
117-
// ミューテーションは、{ type, payload } の形式でログ出力されます
116+
// ミューテーションは、`{ type, payload }` の形式でログ出力されます
118117
// 任意の方法でそれをフォーマットできます
119118
return mutation.type
120119
}

docs/ja/testing.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export const getAllProducts = ({ commit }) => {
7171
// inline loader のために require 構文を使用する
7272
// ここでは inject-loader を使って、モック化された依存関係を注入できるようにするモジュールファクトリーを返す
7373
import { expect } from 'chai'
74-
const actionsInjector = require('inject!./actions')
74+
const actionsInjector = require('inject-loader!./actions')
7575

7676
// モックによってモジュールを作成する
7777
const actions = actionsInjector({
@@ -212,7 +212,7 @@ mocha test-bundle.js
212212
#### ブラウザでの実行
213213

214214
1. `mocha-loader` をインストールする
215-
2. 上記 webpack 設定から `entry``'mocha!babel!./test.js'` に変更する
215+
2. 上記 webpack 設定から `entry``'mocha-loader!babel-loader!./test.js'` に変更する
216216
3. 設定を使用して `webpack-dev-server` を開始する
217217
4. ブラウザで `localhost:8080/webpack-dev-server/test-bundle` を開く
218218

0 commit comments

Comments
 (0)