Skip to content

update ja docs #879

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 5 commits into from
Jul 22, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
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