Skip to content

Commit

Permalink
update ja docs (vuejs#879)
Browse files Browse the repository at this point in the history
* tweak getters.md from vuejs#791

* tweak some sections from vuejs#794

* translation about SSR notice at modules section (ref: vuejs#809)

* translation getters section (ref: vuejs#831)

* tweak testing section from vuejs#844
  • Loading branch information
kazupon authored and ktsn committed Jul 22, 2017
1 parent 7f2049f commit 5c0050b
Show file tree
Hide file tree
Showing 6 changed files with 25 additions and 22 deletions.
10 changes: 6 additions & 4 deletions docs/ja/actions.md
Original file line number Diff line number Diff line change
Expand Up @@ -106,10 +106,12 @@ export default {
// ...
methods: {
...mapActions([
'increment' // this.increment() を this.$store.dispatch('increment') にマッピングする
'increment', // `this.increment()` を `this.$store.dispatch('increment')` にマッピングする
// `mapActions` もペイロードをサポートする:
'incrementBy' // `this.incrementBy(amount)` を `this.$store.dispatch('incrementBy', amount)` にマッピングする
]),
...mapActions({
add: 'increment' // this.add() を this.$store.dispatch('increment') にマッピングする
add: 'increment' // `this.add()``this.$store.dispatch('increment')` にマッピングする
})
}
}
Expand Down Expand Up @@ -158,14 +160,14 @@ actions: {
最終的に JavaScript の機能として近く導入される [async / await](https://tc39.github.io/ecmascript-asyncawait/) を使用することで、次のようにアクションを組み合わせることができます:

``` js
// getData() と getOtherData() が Promise を返すことを想定している
// `getData()``getOtherData()` が Promise を返すことを想定している

actions: {
async actionA ({ commit }) {
commit('gotData', await getData())
},
async actionB ({ dispatch, commit }) {
await dispatch('actionA') // actionA が完了するのを待機する
await dispatch('actionA') // `actionA` が完了するのを待機する
commit('gotOtherData', await getOtherData())
}
}
Expand Down
6 changes: 4 additions & 2 deletions docs/ja/getters.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,9 @@ computed: {

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

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

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

``` js
const store = new Vuex.Store({
Expand Down Expand Up @@ -100,7 +102,7 @@ export default {

``` js
...mapGetters({
// this.doneCount を store.getters.doneTodosCount にマッピングさせる
// `this.doneCount``store.getters.doneTodosCount` にマッピングさせる
doneCount: 'doneTodosCount'
})
```
8 changes: 4 additions & 4 deletions docs/ja/modules.md
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@ const store = new Vuex.Store({
}
})

store.state.a // -> moduleA のステート
store.state.b // -> moduleB のステート
store.state.a // -> `moduleA` のステート
store.state.b // -> `moduleB` のステート
```

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

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

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

Expand Down
8 changes: 4 additions & 4 deletions docs/ja/mutations.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const store = new Vuex.Store({
})
```

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

``` js
store.commit('increment')
Expand Down Expand Up @@ -165,13 +165,13 @@ export default {
// ...
methods: {
...mapMutations([
'increment', // this.increment() を this.$store.commit('increment') にマッピングする
'increment', // `this.increment()``this.$store.commit('increment')` にマッピングする

// mapMutations はペイロードサポートする:
'incrementBy' // this.incrementBy(amount) を this.$store.commit('incrementBy', amount) にマッピングする
'incrementBy' // `this.incrementBy(amount)``this.$store.commit('incrementBy', amount)` にマッピングする
]),
...mapMutations({
add: 'increment' // this.add() を this.$store.commit('increment') にマッピングする
add: 'increment' // `this.add()``this.$store.commit('increment')` にマッピングする
})
}
}
Expand Down
11 changes: 5 additions & 6 deletions docs/ja/plugins.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const myPlugin = store => {
// ストアが初期化されたときに呼ばれます
store.subscribe((mutation, state) => {
// それぞれのミューテーションの後に呼ばれます
// ミューテーションは { type, payload } の形式で提供されます
// ミューテーションは `{ type, payload }` の形式で提供されます
})
}
```
Expand Down Expand Up @@ -62,7 +62,7 @@ const myPluginWithSnapshot = store => {
store.subscribe((mutation, state) => {
let nextState = _.cloneDeep(state)

// 以前の状態と以後の状態を比較...
// `prevState` と `nextState` を比較...

// 次のミューテーションのために状態を保存
prevState = nextState
Expand Down Expand Up @@ -103,9 +103,8 @@ const store = new Vuex.Store({
const logger = createLogger({
collapsed: false, // ログ出力されたミューテーションを自動で展開します
filter (mutation, stateBefore, stateAfter) {
// ミューテーションを記録する必要がある場合は、true を返します
// returns true if a mutation should be logged
// `mutation` は { type, payload } です
// ミューテーションを記録する必要がある場合は、`true` を返します
// `mutation` は `{ type, payload }` です
return mutation.type !== "aBlacklistedMutation"
},
transformer (state) {
Expand All @@ -114,7 +113,7 @@ const logger = createLogger({
return state.subTree
},
mutationTransformer (mutation) {
// ミューテーションは、{ type, payload } の形式でログ出力されます
// ミューテーションは、`{ type, payload }` の形式でログ出力されます
// 任意の方法でそれをフォーマットできます
return mutation.type
}
Expand Down
4 changes: 2 additions & 2 deletions docs/ja/testing.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const getAllProducts = ({ commit }) => {
// inline loader のために require 構文を使用する
// ここでは inject-loader を使って、モック化された依存関係を注入できるようにするモジュールファクトリーを返す
import { expect } from 'chai'
const actionsInjector = require('inject!./actions')
const actionsInjector = require('inject-loader!./actions')

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

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

Expand Down

0 comments on commit 5c0050b

Please sign in to comment.