diff --git a/docs/ja/actions.md b/docs/ja/actions.md index 89083abec..99b0a2292 100644 --- a/docs/ja/actions.md +++ b/docs/ja/actions.md @@ -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')` にマッピングする }) } } @@ -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()) } } diff --git a/docs/ja/getters.md b/docs/ja/getters.md index 915af4281..73cd03490 100644 --- a/docs/ja/getters.md +++ b/docs/ja/getters.md @@ -12,7 +12,9 @@ computed: { もしこの関数を複数のコンポーネントで利用したくなったら、関数をコピーするか、あるいは関数を共用のヘルパーに切り出して複数の場所でインポートする必要があります。しかし、どちらも理想的とはいえません。 -Vuex を利用するとストア内に "ゲッター" を定義することができます(ストアのための算出プロパティだと考えてください)。ゲッターはステート(状態)を第1引数として受け取ります: +Vuex を利用するとストア内に "ゲッター" を定義することができます。それらをストアの算出プロパティと考えることができます。算出プロパティと同様に、ゲッターの結果はその依存関係に基づいて計算され、依存関係の一部が変更されたときにのみ再評価されます。 + +ゲッターは第1引数として、state を受け取ります: ``` js const store = new Vuex.Store({ @@ -100,7 +102,7 @@ export default { ``` js ...mapGetters({ - // this.doneCount を store.getters.doneTodosCount にマッピングさせる + // `this.doneCount` を `store.getters.doneTodosCount` にマッピングさせる doneCount: 'doneTodosCount' }) ``` diff --git a/docs/ja/modules.md b/docs/ja/modules.md index 0a71df1ce..5060d1e0d 100644 --- a/docs/ja/modules.md +++ b/docs/ja/modules.md @@ -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` のステート ``` ### モジュールのローカルステート @@ -38,7 +38,7 @@ const moduleA = { state: { count: 0 }, mutations: { increment (state) { - // state はモジュールのローカルステート + // `state` はモジュールのローカルステート state.count++ } }, @@ -251,7 +251,7 @@ store.registerModule(['nested', 'myModule'], { - 同じモジュールを使用する複数のストアを作成する; - 同じストアに同じモジュールを複数回登録する -モジュールの状態を宣言するために単純なオブジェクトを使用すると、その状態オブジェクトは参照によって共有され、変更時にクロスストア/モジュールの状態汚染を引き起こします。 +モジュールの状態を宣言するために単純なオブジェクトを使用すると、その状態オブジェクトは参照によって共有され、変更時にクロスストア/モジュールの状態汚染を引き起こします。(例: `runInNewContext` オプションが `false` または `'once'` のとき、[SSR ではステートフルなシングルトンは避けます](https://ssr.vuejs.org/ja/structure.html#ステートフルなシングルトンの回避)。) これは、実際には Vue コンポーネント内部の `data` と全く同じ問題です。従って解決策も同じです。モジュールの状態を宣言するために関数を使用してください (2.3.0 以降でサポートされます): diff --git a/docs/ja/mutations.md b/docs/ja/mutations.md index 6f5ba78c7..067ea472b 100644 --- a/docs/ja/mutations.md +++ b/docs/ja/mutations.md @@ -16,7 +16,7 @@ const store = new Vuex.Store({ }) ``` -直接ミューテーションハンドラを呼び出すことはできません。この mutations オプションは、どちらかいうと "タイプが `increment` のミューテーションがトリガーされたときに、このハンドラが呼ばれる" といったイベント登録のようなものです。ミューテーションハンドラを起動するためにはミューテーションのタイプを指定して **store.commit** を呼び出す必要があります: +直接ミューテーションハンドラを呼び出すことはできません。この mutations オプションは、どちらかいうと "タイプが `increment` のミューテーションがトリガーされたときに、このハンドラが呼ばれる" といったイベント登録のようなものです。ミューテーションハンドラを起動するためにはミューテーションのタイプを指定して `store.commit` を呼び出す必要があります: ``` js store.commit('increment') @@ -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')` にマッピングする }) } } diff --git a/docs/ja/plugins.md b/docs/ja/plugins.md index af15d5b39..690cf2396 100644 --- a/docs/ja/plugins.md +++ b/docs/ja/plugins.md @@ -7,7 +7,7 @@ const myPlugin = store => { // ストアが初期化されたときに呼ばれます store.subscribe((mutation, state) => { // それぞれのミューテーションの後に呼ばれます - // ミューテーションは { type, payload } の形式で提供されます + // ミューテーションは `{ type, payload }` の形式で提供されます }) } ``` @@ -62,7 +62,7 @@ const myPluginWithSnapshot = store => { store.subscribe((mutation, state) => { let nextState = _.cloneDeep(state) - // 以前の状態と以後の状態を比較... + // `prevState` と `nextState` を比較... // 次のミューテーションのために状態を保存 prevState = nextState @@ -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) { @@ -114,7 +113,7 @@ const logger = createLogger({ return state.subTree }, mutationTransformer (mutation) { - // ミューテーションは、{ type, payload } の形式でログ出力されます + // ミューテーションは、`{ type, payload }` の形式でログ出力されます // 任意の方法でそれをフォーマットできます return mutation.type } diff --git a/docs/ja/testing.md b/docs/ja/testing.md index 6422575ee..ea8970b4b 100644 --- a/docs/ja/testing.md +++ b/docs/ja/testing.md @@ -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({ @@ -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` を開く