diff --git a/ja/guide/vuex-store.md b/ja/guide/vuex-store.md index 6e87670e0..2244a940d 100644 --- a/ja/guide/vuex-store.md +++ b/ja/guide/vuex-store.md @@ -1,25 +1,48 @@ --- -title: Vuex Store -description: Using a store to manage the state is important for every big application, that's why nuxt.js implement Vuex in its core. +title: Vuex ストア +description: 状態を管理するためにストアを使うことはすべての大規模なアプリケーションにとって重要です。Nuxt.js が Vuex をコアに組み入れたのはそのような理由からです。 --- -> Using a store to manage the state is important to every big application, that's why nuxt.js implement [vuex](https://github.com/vuejs/vuex) in its core. + + -## Activate the Store + -Nuxt.js will look for the `store` directory, if it exists, it will: +> 状態を管理するためにストアを使うことはすべての大規模なアプリケーションにとって重要です。Nuxt.js が [Vuex](https://github.com/vuejs/vuex) をコアに組み入れたのはそのような理由からです。 -1. Import Vuex -2. Add `vuex` module in the vendors bundle -3. Add the `store` option to the root `Vue` instance. + -Nuxt.js lets you have **2 modes of store**, choose the one you prefer: -- **Classic:** `store/index.js` returns a store instance -- **Modules:** every `.js` file inside the `store` directory is transformed as a [namespaced module](http://vuex.vuejs.org/en/modules.html) (`index` being the root module) +## ストアを有効にする -## Classic mode + -To activate the store with the classic mode, we create the `store/index.js` file and export the store instance: +Nuxt.js は `store` ディレクトが存在するときにはそちらを探しに行きます: + + + + + +1. Vuex をインポートします +2. `vuex` もモジュールを vendor のバンドルファイルに追加します +3. `store` オプションをルートの `Vue` インスタンスに追加します + + + +Nuxt.js では **2つのモードのストア** を持つことができます。いずれか好みのほうを選んでください: + + + + +- **クラシック:** `store/index.js` がストアインスタンスを返します +- **モジュール:** `store` ディレクトリ内のすべての `.js` ファイルが [Namespaced モジュール](http://vuex.vuejs.org/en/modules.html) に変換されます(`index` はルートモジュールとして存在します) + + + +## クラシックモード + + + +ストアをクラシックモードで有効にするには `store/index.js` ファイルを作成し、ストアインスタンスをエクスポートします: ```js import Vuex from 'vuex' @@ -38,9 +61,13 @@ const store = new Vuex.Store({ export default store ``` -> We don't need to install `vuex` since it's shipped with nuxt.js + + +> `vuex` は Nuxt.js によって取り込まれているため、別途インストールする必要はありません + + -We can now use `this.$store` inside our components: +クラシックモードを有効にすると、コンポーネント内で `this.$store` を使うことができます: ```html ``` -## Modules mode + + +## モジュールモード + + + +> Nuxt.js では `store` ディレクトリ内にモジュールと対応するファイルを持つことができます。 -> Nuxt.js lets you have a `store` directory with every file corresponding to a module. + -If you want this option, export the state, mutations and actions in `store/index.js` instead of a store instance: +このオプションを使いたいときは、ストアインスタンスの代わりに、`store/index.js` 内のストア、ミューテーション、アクションをエクスポートしてください: ```js export const state = { @@ -66,7 +99,10 @@ export const mutations = { } ``` -Then, you can have a `store/todos.js` file: + + +すると次のような `store/todos.js` ファイルを持つことができます: + ```js export const state = { list: [] @@ -88,7 +124,10 @@ export const mutations = { } ``` -The store will be as such: + + +ストアは下記のようになります: + ```js new Vuex.Store({ state: { counter: 0 }, @@ -121,7 +160,9 @@ new Vuex.Store({ }) ``` -And in your `pages/todos.vue`, using the `todos` module: + + +そして `pages/todos.vue` 内で `todos` モジュールを下記のように使うことができます: ```html