浏览代码

bump deps, cleanup docs

Evan You 8 年之前
父节点
当前提交
4fbd216297
共有 100 个文件被更改,包括 51 次插入6988 次删除
  1. 1 6
      docs/LANGS.md
  2. 7 4
      docs/en/SUMMARY.md
  3. 43 0
      docs/en/installation.md
  4. 0 23
      docs/en/npm-debug.log
  5. 0 265
      docs/en/tutorial.md
  6. 二进制
      docs/en/tutorial/result.png
  7. 二进制
      docs/en/tutorial/vuex_flow.png
  8. 0 1
      docs/es/README.md
  9. 0 19
      docs/es/SUMMARY.md
  10. 0 134
      docs/es/actions.md
  11. 0 107
      docs/es/api.md
  12. 0 1
      docs/es/book.json
  13. 0 89
      docs/es/data-flow.md
  14. 0 41
      docs/es/forms.md
  15. 0 53
      docs/es/getting-started.md
  16. 0 44
      docs/es/hot-reload.md
  17. 0 13
      docs/es/intro.md
  18. 0 83
      docs/es/middlewares.md
  19. 0 164
      docs/es/mutations.md
  20. 0 156
      docs/es/state.md
  21. 0 25
      docs/es/strict.md
  22. 0 136
      docs/es/structure.md
  23. 0 167
      docs/es/testing.md
  24. 0 265
      docs/es/tutorial.md
  25. 二进制
      docs/es/tutorial/result.png
  26. 二进制
      docs/es/tutorial/vuex_flow.png
  27. 二进制
      docs/es/vuex.png
  28. 0 1
      docs/it/README.md
  29. 0 18
      docs/it/SUMMARY.md
  30. 0 133
      docs/it/actions.md
  31. 0 94
      docs/it/api.md
  32. 0 1
      docs/it/book.json
  33. 0 89
      docs/it/data-flow.md
  34. 0 41
      docs/it/forms.md
  35. 0 54
      docs/it/getting-started.md
  36. 0 45
      docs/it/hot-reload.md
  37. 0 13
      docs/it/intro.md
  38. 0 83
      docs/it/middlewares.md
  39. 0 165
      docs/it/mutations.md
  40. 0 159
      docs/it/state.md
  41. 0 25
      docs/it/strict.md
  42. 0 136
      docs/it/structure.md
  43. 0 166
      docs/it/testing.md
  44. 二进制
      docs/it/vuex.png
  45. 0 1
      docs/ja/README.md
  46. 0 17
      docs/ja/SUMMARY.md
  47. 0 137
      docs/ja/actions.md
  48. 0 93
      docs/ja/api.md
  49. 0 1
      docs/ja/book.json
  50. 0 31
      docs/ja/concepts.md
  51. 0 92
      docs/ja/data-flow.md
  52. 0 36
      docs/ja/forms.md
  53. 0 29
      docs/ja/hot-reload.md
  54. 0 13
      docs/ja/intro.md
  55. 0 81
      docs/ja/middlewares.md
  56. 0 95
      docs/ja/mutations.md
  57. 0 2
      docs/ja/quickstart.md
  58. 0 51
      docs/ja/state.md
  59. 0 25
      docs/ja/strict.md
  60. 0 133
      docs/ja/structure.md
  61. 0 135
      docs/ja/testing.md
  62. 二进制
      docs/ja/vuex.png
  63. 0 1
      docs/pt/README.md
  64. 0 19
      docs/pt/SUMMARY.md
  65. 0 134
      docs/pt/actions.md
  66. 0 94
      docs/pt/api.md
  67. 0 1
      docs/pt/book.json
  68. 0 89
      docs/pt/data-flow.md
  69. 0 41
      docs/pt/forms.md
  70. 0 53
      docs/pt/getting-started.md
  71. 0 44
      docs/pt/hot-reload.md
  72. 0 13
      docs/pt/intro.md
  73. 0 82
      docs/pt/middlewares.md
  74. 0 134
      docs/pt/mutations.md
  75. 0 156
      docs/pt/state.md
  76. 0 25
      docs/pt/strict.md
  77. 0 136
      docs/pt/structure.md
  78. 0 167
      docs/pt/testing.md
  79. 0 266
      docs/pt/tutorial.md
  80. 二进制
      docs/pt/tutorial/result.png
  81. 二进制
      docs/pt/tutorial/vuex_flow.png
  82. 二进制
      docs/pt/vuex.png
  83. 0 1
      docs/zh-cn/README.md
  84. 0 20
      docs/zh-cn/SUMMARY.md
  85. 0 199
      docs/zh-cn/actions.md
  86. 0 94
      docs/zh-cn/api.md
  87. 0 1
      docs/zh-cn/book.json
  88. 0 88
      docs/zh-cn/data-flow.md
  89. 0 67
      docs/zh-cn/forms.md
  90. 0 53
      docs/zh-cn/getting-started.md
  91. 0 29
      docs/zh-cn/hot-reload.md
  92. 0 13
      docs/zh-cn/intro.md
  93. 0 81
      docs/zh-cn/middlewares.md
  94. 0 133
      docs/zh-cn/mutations.md
  95. 0 154
      docs/zh-cn/state.md
  96. 0 25
      docs/zh-cn/strict.md
  97. 0 159
      docs/zh-cn/structure.md
  98. 0 161
      docs/zh-cn/testing.md
  99. 0 264
      docs/zh-cn/tutorial.md
  100. 二进制
      docs/zh-cn/tutorial/result.png

+ 1 - 6
docs/LANGS.md

@@ -1,6 +1 @@
-* [English (1.0)](en/)
-* [简体中文 (0.8, outdated)](zh-cn/)
-* [Português (0.8, outdated)](pt/)
-* [Italiano (0.8, outdated)](it/)
-* [Español (0.8, outdated)](es/)
-* [日本語 (0.8, outdated)](ja/)
+* [English](en/)

+ 7 - 4
docs/en/SUMMARY.md

@@ -1,12 +1,15 @@
-# Table of Contents
+# Vuex
 
-> Make sure you read the sections in order.
+### Large-scale State Management for Vue.js
 
+> Note: This is docs for vuex@2.x. The docs for 1.x is [here](https://github.com/vuejs/vuex/tree/1.0/docs).
+
+- [Release Notes](https://github.com/vuejs/vuex/releases)
+- [Installation](installation.md)
 - [What is Vuex?](intro.md)
 - [Getting Started](getting-started.md)
-- [Tutorial](tutorial.md)
 - Core Concepts
-  - [State and Getters](state.md)
+  - [State](state.md)
   - [Mutations](mutations.md)
   - [Actions](actions.md)
 - [Data Flow](data-flow.md)

+ 43 - 0
docs/en/installation.md

@@ -0,0 +1,43 @@
+# Installation
+
+### Direct Download / CDN
+
+[https://unpkg.com/vuex](https://unpkg.com/vuex)
+
+[Unpkg.com](https://unpkg.com) provides NPM-based CDN links. The above link will always point to the latest release on NPM. You can also use a specific version/tag via URLs like `https://unpkg.com/vuex@2.0.0`.
+
+Include `vuex` after Vue and it will install itself automatically:
+
+``` html
+<script src="/path/to/vue.js"></script>
+<script src="/path/to/vuex.js"></script>
+```
+
+### NPM
+
+``` bash
+npm install vuex
+```
+
+When used with a module system, you must explicitly install the router via `Vue.use()`:
+
+``` js
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+```
+
+You don't need to do this when using global script tags.
+
+### Dev Build
+
+You will have to clone directly from GitHub and build `vuex` yourself if
+you want to use the latest dev build.
+
+``` bash
+git clone https://github.com/vuejs/vuex.git node_modules/vuex
+cd node_modules/vuex
+npm install
+npm run build
+```

+ 0 - 23
docs/en/npm-debug.log

@@ -1,23 +0,0 @@
-0 info it worked if it ends with ok
-1 verbose cli [ '/Users/evan/.nvm/versions/node/v6.2.2/bin/node',
-1 verbose cli   '/Users/evan/.nvm/versions/node/v6.2.2/bin/npm',
-1 verbose cli   'run',
-1 verbose cli   'docs' ]
-2 info using npm@3.9.5
-3 info using node@v6.2.2
-4 verbose stack Error: ENOENT: no such file or directory, open '/Users/evan/Vue/vuex/docs/package.json'
-4 verbose stack     at Error (native)
-5 verbose cwd /Users/evan/Vue/vuex/docs/en
-6 error Darwin 15.3.0
-7 error argv "/Users/evan/.nvm/versions/node/v6.2.2/bin/node" "/Users/evan/.nvm/versions/node/v6.2.2/bin/npm" "run" "docs"
-8 error node v6.2.2
-9 error npm  v3.9.5
-10 error path /Users/evan/Vue/vuex/docs/package.json
-11 error code ENOENT
-12 error errno -2
-13 error syscall open
-14 error enoent ENOENT: no such file or directory, open '/Users/evan/Vue/vuex/docs/package.json'
-15 error enoent ENOENT: no such file or directory, open '/Users/evan/Vue/vuex/docs/package.json'
-15 error enoent This is most likely not a problem with npm itself
-15 error enoent and is related to npm not being able to find a file.
-16 verbose exit [ -2, true ]

+ 0 - 265
docs/en/tutorial.md

@@ -1,265 +0,0 @@
-# Tutorial
-
-Let's build a very simple app using Vuex to understand how to use it. For this example, we're building an app where you press a button, and it increments a counter.
-
-![End Result](tutorial/result.png)
-
-We are using this simple example to explain the concepts, and the problems Vuex aims to solve - how to manage a large app which uses several components. Consider if this example used three components:
-
-### `components/App.vue`
-
-The root component, which contains two other child components:
-
-* `Display` to display the current counter value.
-* `Increment` which is a button to increment the current value.
-
-```html
-<template>
-  <div>
-    <Display></Display>
-    <Increment></Increment>
-  </div>
-</template>
-
-<script>
-
-import Display from './Display.vue'
-import Increment from './Increment.vue'
-
-export default {
-  components: {
-    Display: Display,
-    Increment: Increment
-  }
-}
-</script>
-```
-
-### `components/Display.vue`
-
-```html
-<template>
-  <div>
-    <h3>Count is 0</h3>
-  </div>
-</template>
-
-<script>
-export default {
-}
-</script>
-```
-
-### `components/Increment.vue`
-
-```html
-<template>
-  <div>
-    <button>Increment +1</button>
-  </div>
-</template>
-
-<script>
-export default {
-}
-</script>
-```
-
-### Challenges without Vuex
-
-* `Increment` and `Display` aren't aware of each other, and cannot pass messages to each other.
-* `App` will have to use events and broadcasts to coordinate the two components.
-* Since `App` is coordinating between the two components, they are not re-usable and tightly coupled. Re-structuring the app might break it.
-
-### Vuex "flow"
-
-These are the steps that take place in order:
-
-![Vuex Flow](tutorial/vuex_flow.png)
-
-This might seem a little excessive for incrementing a counter. But do note that these concepts work well in larger applications, improving maintainability and making your app easier to debug and improve in the long run. So let's modify our code to use Vuex.
-
-### Step 1: Add a store
-
-The store holds the data for the app. All components read the data from the store. Before we begin, install Vuex via npm:
-
-```
-$ npm install --save vuex
-```
-
-Create a new file in `vuex/store.js`
-
-```js
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-// Make vue aware of Vuex
-Vue.use(Vuex)
-
-// Create an object to hold the initial state when
-// the app starts up
-const state = {
-  // TODO: Set up our initial state
-}
-
-// Create an object storing various mutations. We will write the mutation
-const mutations = {
-  // TODO: set up our mutations
-}
-
-// Combine the initial state and the mutations to create a Vuex store.
-// This store can be linked to our app.
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-We need to make our app aware of this store. To do this we simply need to modify our root component.
-
-Edit `components/App.vue` and add the store.
-
-```js
-import Display from './Display.vue'
-import Increment from './Increment.vue'
-import store from '../vuex/store' // import the store we just created
-
-export default {
-  components: {
-    Display: Display,
-    Increment: Increment
-  },
-  store: store // make this and all child components aware of the new store
-}
-```
-
-> **Tip**: With ES6 and babel you can write it as
->
->     components: {
->       Display,
->       Increment,
->     },
->     store
-
-### Step 2: Set up the action
-
-The action is a function which is called from the component. Action functions can trigger updates in the store by dispatching the right mutation. An action can also talk to HTTP backends and read other data from the store before dispatching updates.
-
-Create a new file in `vuex/actions.js` with a single function `incrementCounter`.
-
-```js
-// An action will receive the store as the first argument.
-// Since we are only interested in the dispatch (and optionally the state)
-// we can pull those two parameters using the ES6 destructuring feature
-export const incrementCounter = function ({ dispatch, state }) {
-  dispatch('INCREMENT', 1)
-}
-```
-
-And let's call the action from our `components/Increment.vue` component.
-
-```html
-<template>
-  <div>
-    <button @click='increment'>Increment +1</button>
-  </div>
-</template>
-
-<script>
-import { incrementCounter } from '../vuex/actions'
-export default {
-  vuex: {
-    actions: {
-      increment: incrementCounter
-    }
-  }
-}
-</script>
-```
-
-Notice some interesting things about what we just added.
-
-1. We have a new object `vuex.actions` which includes the new action.
-2. We didn't specify which store, object, state, etc. Vuex wires everything up for us.
-3. We can call the action by using `this.increment()` in any method.
-4. We can also call the action using the `@click` parameter making `increment` like any regular Vue component method.
-5. The action is called `incrementCounter` but we can use any name which is appropriate.
-
-### Step 3: Set up the state and mutation
-
-In our `vuex/actions.js` file we dispatch an `INCREMENT` mutation but we haven't written how to handle it yet. Let's do that now.
-
-Edit `vuex/store.js`
-
-```js
-const state = {
-  // When the app starts, count is set to 0
-  count: 0
-}
-
-const mutations = {
-  // A mutation receives the current state as the first argument
-  // You can make any modifications you want inside this function
-  INCREMENT (state, amount) {
-    state.count = state.count + amount
-  }
-}
-```
-
-### Step 4: Get the value into the component
-
-Create a new file called `vuex/getters.js`
-
-```js
-// This getter is a function which just returns the count
-// With ES6 you can also write it as:
-// export const getCount = state => state.count
-
-export function getCount (state) {
-  return state.count
-}
-```
-
-This function returns a part of the state object which is of interest - the current count. We can now use this getter inside the component.
-
-Edit `components/Display.vue`
-
-```html
-<template>
-  <div>
-    <h3>Count is {{ counterValue }}</h3>
-  </div>
-</template>
-
-<script>
-import { getCount } from '../vuex/getters'
-export default {
-  vuex: {
-    getters: {
-      // note that you're passing the function itself, and not the value 'getCount()'
-      counterValue: getCount
-    }
-  }
-}
-</script>
-```
-
-There's a new object `vuex.getters` which requests `counterValue` to be bound to the getter `getCount`. We've chosen different names to demonstrate that you can use the names that make sense in the context of your component, not necessarily the getter name itself.
-
-You might be wondering - why did we choose to use a getter instead of directly accessing the value from the state. This concept is more of a best practice, and is more applicable to a larger app, which presents several distinct advantages:
-
-1. We may want to define getters with computed values (think totals, averages, etc.).
-2. Many components in a larger app can use the same getter function.
-3. If the value is moved from say `store.count` to `store.counter.value` you'd have to update one getter instead of dozens of components.
-
-These are a few of the benefits of using getters.
-
-### Step 5: Next steps
-
-If you run the application, now you will find it behaves as expected.
-
-To further your understanding of Vuex, you can try implementing the following changes to the app, as an exercise.
-
-* Add a decrement button.
-* Install [VueJS Devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) and play with the Vuex tools and observe the mutations being applied.
-* Add a text input in another component called `IncrementAmount` and enter the amount to increment by. This can be a bit tricky since forms in Vuex work slightly differently. Read the [Form Handling](forms.md) section for more details.

二进制
docs/en/tutorial/result.png


二进制
docs/en/tutorial/vuex_flow.png


+ 0 - 1
docs/es/README.md

@@ -1 +0,0 @@
-SUMMARY.md

+ 0 - 19
docs/es/SUMMARY.md

@@ -1,19 +0,0 @@
-# Tabla de contenidos
-
-> Asegúrate de leer estas secciones en orden.
-
-- [Qué es Vuex?](intro.md)
-- [Empezando](getting-started.md)
-- [Tutorial](tutorial.md)
-- Conceptos Básicos
-  - [Estado y Obtenedores](state.md)
-  - [Mutaciones](mutations.md)
-  - [Acciones](actions.md)
-- [Flujo de datos](data-flow.md)
-- [Estructura de la Aplicación](structure.md)
-- [Middlewares](middlewares.md)
-- [Modo estricto](strict.md)
-- [Manejo de formularios](forms.md)
-- [Probando](testing.md)
-- [Recarga en caliente](hot-reload.md)
-- [Referencia API](api.md)

+ 0 - 134
docs/es/actions.md

@@ -1,134 +0,0 @@
-# Acciones
-
-> Acciones en Vuex son de hecho "creadores de acción" en las definiciones de vanilla flux, pero encuentro ese término más confuso que útil.
-
-Acciones son simplemente funciones que despachan mutaciones. Por convenio, las acciones de Vuex siempre esperan una instancia del almacén como su primer argumento, seguido por argumentos adicionales opcionales.
-
-``` js
-// la acción más simple
-function increment (store) {
-  store.dispatch('INCREMENT')
-}
-
-// acción con argumentos adicionales
-// usando la destructuración de argumentos del ES2015
-function incrementBy ({ dispatch }, amount) {
-  dispatch('INCREMENT', amount)
-}
-```
-
-Esto puede parecer tonto a primera vista: ¿Por qué no despachamos las mutaciones directamente? Bien, recuerda que **las mutaciones deben ser síncronas**. Las acciones no. Podemos realizar operaciones **asíncronas** dentro de una acción:
-
-``` js
-function incrementAsync ({ dispatch }) {
-  setTimeout(() => {
-    dispatch('INCREMENT')
-  }, 1000)
-}
-```
-
-Un ejemplo más práctico sería una acción para procesar un carrito de la compra, lo cual involucra **llamar a una API asíncrona** y **despachar múltiples mutaciones**:
-
-``` js
-function checkout ({ dispatch, state }, products) {
-  // guarda los actuales artículos del carrito
-  const savedCartItems = [...state.cart.added]
-  // envía la solicitud y con optimismo vacía el carrito
-  dispatch(types.CHECKOUT_REQUEST)
-  // el API de la tienda acepta una retrollamada en caso de éxito
-  // y otra en caso de fallo
-  shop.buyProducts(
-    products,
-    // éxito
-    () => dispatch(types.CHECKOUT_SUCCESS),
-    // fallo
-    () => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
-  )
-}
-```
-
-Ten en cuenta que en vez de esperar valores de retorno o pasar retrollamadas a acciones, el resultado de llamar al API asíncrono es también gestionado despachando mutaciones. La regla de oro es que **los únicos efectos secundarios producidos por llamar acciones deberían ser mutaciones despachadas**.
-
-### Llamando acciones en componentes
-
-Puedes haber notado que las funciones asociadas a las acciones no son directamente ejecutables sin la referencia a una instancia del almacén. Técnicamente, podemos invocar una acción llamando `action(this.$store)` dentro de un método, pero es mejor si directamente podemos asignar las acciones como métodos de los componentes para así poder fácilmente referenciarlos dentro de las plantillas. Podemos hacerlo usando la opción `vuex.actions`:
-
-``` js
-// dentro del componente
-import { incrementBy } from './actions'
-
-const vm = new Vue({
-  vuex: {
-    getters: { ... }, // getters del estado
-    actions: {
-      incrementBy // abreviación de un objeto literal en ES6, asignación usando el mismo nombre
-    }
-  }
-})
-```
-
-Lo que el código anterior hace es asignar la acción pura `incrementBy` a la instancia del almacén del componente, y exponerlo en el componente como un método de instancia, `vm.incrementBy`. Cualquier argumento pasado a `vm.incrementBy` será pasado a la función de la acción después del primer argumento que es el almacén, así pues:
-
-``` js
-vm.incrementBy(1)
-```
-
-es equivalente a:
-
-``` js
-incrementBy(vm.$store, 1)
-```
-
-Pero la ventaja es que se puede asignar más fácilmente dentro de la plantilla del componente:
-
-``` html
-<button v-on:click="incrementBy(1)">incrementar por uno</button>
-```
-
-Puedes obviamente usar un nombre de método diferente cuando asignes las acciones:
-
-``` js
-// dentro del componente
-import { incrementBy } from './actions'
-
-const vm = new Vue({
-  vuex: {
-    getters: { ... },
-    actions: {
-      plus: incrementBy // asignar usando un nombre diferente
-    }
-  }
-})
-```
-
-Ahora la acción será asignada como `vm.plus` en vez de `vm.incrementBy`.
-
-### Acciones en línea
-
-Si la acción es específica del componente, puedes usar un atajo y definirla en línea:
-
-``` js
-const vm = new Vue({
-  vuex: {
-    getters: { ... },
-    actions: {
-      plus: ({ dispatch }) => dispatch('INCREMENT')
-    }
-  }
-})
-```
-
-### Asignando todas las acciones
-
-Si simplemente quieres asignar todas las acciones compartidas:
-
-``` js
-import * as actions from './actions'
-
-const vm = new Vue({
-  vuex: {
-    getters: { ... },
-    actions // asignar todas las acciones
-  }
-})
-```

+ 0 - 107
docs/es/api.md

@@ -1,107 +0,0 @@
-# Referencia API
-
-### Vuex.Store
-
-``` js
-import Vuex from 'vuex'
-
-const store = new Vuex.Store({ ...options })
-```
-
-### Opciones de construcción de Vuex.Store
-
-- **state**
-
-  - tipo: `Object`
-
-    El objeto de estado raíz para el almacén Vuex.
-
-    [Detalles](state.md)
-
-- **mutations**
-
-  - tipo: `Object`
-
-    Un objeto en el que cada clave de entrada es el nombre de la mutación y el valor es una función de controlador de mutación. La función de controlador recibe siempre `state` como primer argumento, y seguido recibe todos los argumentos que se pasan a la llamada de despacho.
-
-    [Detalles](mutations.md)
-
-- **modules**
-
-  - tipo: `Object`
-
-    Un objeto que contiene submódulos a combinar en el almacén, en la forma de:
-
-    ``` js
-    {
-      key: {
-        state,
-        mutations
-      },
-      ...
-    }
-    ```
-
-    Cada módulo puede contener `state` y `mutations` similares a las opciones raíz. El estado del módulo se une al estado raíz del almacén usando las claves del módulo. Las mutaciones de un módulo sólo reciben el estado propio del módulo como primer argumento en lugar del estado raíz.
-
-- **middlewares**
-
-  - tipo: `Array<Object>`
-
-    Un conjunto de objetos de middleware que se encuentran en la forma de:
-
-    ``` js
-    {
-      snapshot: Boolean, // por defecto: false
-      onInit: Function,
-      onMutation: Function
-    }
-    ```
-
-    Todos los campos son opcionales. [Detalles](middlewares.md)
-
-- **strict**
-
-  - tipo: `Boolean`
-  - por defecto: `false`
-
-    Fuerza el almacén Vuex a modo estricto. En modo estricto cualquier mutación al estado de Vuex fuera de los manipuladores de mutación generará un error.
-
-    [Detalles](strict.md)
-
-### Propiedades de instancia del Vuex.Store
-
-- **state**
-
-  - tipo: `Object`
-
-    El estado raíz. De sólo lectura.
-
-### Métodos de instancia de Vuex.Store
-
-- **dispatch(mutationName: String, ...args) | dispatch(mutation: Object)**
-
-  Directamente despachar una mutación. Esto es útil en ciertas situaciones, pero en general deberías preferir el uso de acciones en el código de la aplicación.
-
-  *Object-Style Dispatch*
-
-  > requiere >=0.6.2
-
-  También puedes despachar mutaciones utilizando objetos:
-
-  ``` js
-  store.dispatch({
-    type: 'INCREMENT',
-    payload: 10
-  })
-  ```
-
-- **watch(pathOrGetter: String|Function, cb: Function, [options: Object])**
-
-  Observa una ruta o el valor de una función obtenedor, y llamar a la retrollamada cuando el valor cambia. Acepta un objeto opcional de opciones que tiene las mismas opciones como el método `vm.$watch` de Vue.
-
-  Para dejar de observar, llamar a la función de manipulación devuelto.
-
-- **hotUpdate(newOptions: Object)**
-
-  Intercambio en caliente de nuevas acciones y mutaciones. [Detalles](hot-reload.md)

+ 0 - 1
docs/es/book.json

@@ -1 +0,0 @@
-../book.json

+ 0 - 89
docs/es/data-flow.md

@@ -1,89 +0,0 @@
-# Flujo de datos
-
-Construyamos una app contador simple con Vuex para obtener una mejor comprensión del flujo de datos dentro de aplicaciones Vuex. Ten en cuenta que este es un ejemplo trivial con el único fin de explicar los conceptos - en la práctica no necesitas Vuex para tareas tan sencillas.
-
-### El almacén
-
-``` js
-// store.js
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-// estado inicial del app
-const state = {
-  count: 0
-}
-
-// define posibles mutaciones
-const mutations = {
-  INCREMENT (state) {
-    state.count++
-  },
-  DECREMENT (state) {
-    state.count--
-  }
-}
-
-// crea el almacén
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-### Acciones
-
-``` js
-// actions.js
-export const increment = ({ dispatch }) => dispatch('INCREMENT')
-export const decrement = ({ dispatch }) => dispatch('DECREMENT')
-```
-
-### Usalo con Vue
-
-**Plantilla**
-
-``` html
-<div id="app">
-  Tocado: {{ count }} veces
-  <button v-on:click="increment">+</button>
-  <button v-on:click="decrement">-</button>
-</div>
-```
-
-**Script**
-
-``` js
-// Estamos importando e inyectando el almacén aquí porque
-// esta es la raíz. En aplicaciones más grandes esto lo haces sólo una vez.
-import store from './store'
-import { increment, decrement } from './actions'
-
-const app = new Vue({
-  el: '#app',
-  store,
-  vuex: {
-    getters: {
-      count: state => state.count
-    },
-    actions: {
-      increment,
-      decrement
-    }
-  }
-})
-```
-
-Aquí te darás cuenta que el componente en sí es muy sencillo: simplemente muestra un estado del almacén Vuex (ni siquiera tiene datos propios), y llama a algunas acciones de almacén basado en eventos de entrada de usuario.
-
-También te darás cuenta que el flujo de datos es unidireccional, como debería ser en Flux:
-
-1. Entrada de usuario en el componente desencadena llamadas de acción;
-2. Acciones despachan mutaciones que cambian el estado;
-3. Cambios en el flujo de estado desde el almacén de vuelta al componente mediante obtenedores.
-
-<p align="center">
-  <img width="700px" src="vuex.png">
-</p>

+ 0 - 41
docs/es/forms.md

@@ -1,41 +0,0 @@
-# Manejo de formularios
-
-Al utilizar Vuex en modo estricto, podría ser un poco difícil usar `v-model` en una parte de estado que pertenece a Vuex:
-
-``` html
-<input v-model="obj.message">
-```
-
-Asumiendo `obj` es una propiedad computarizada que devuelve un Objeto del almacén, aquí el `v-model` intentará mutar directamente `obj.message` cuando el usuario escriba en la entrada de texto. En modo estricto, esto dará lugar a un error debido a que la mutación no se lleva a cabo dentro de un controlador de mutación Vuex explícito.
-
-La "manera de Vuex" es registrar el valor de `<input>` y llamar a una acción en el evento `input` o `change`:
-
-``` html
-<input :value="message" @input="updateMessage">
-```
-``` js
-// ...
-vuex: {
-  getters: {
-    message: state => state.obj.message
-  },
-  actions: {
-    updateMessage: ({ dispatch }, e) => {
-      dispatch('UPDATE_MESSAGE', e.target.value)
-    }
-  }
-}
-```
-
-Y aquí está el controlador de mutación:
-
-``` js
-// ...
-mutations: {
-  UPDATE_MESSAGE (state, message) {
-    state.obj.message = message
-  }
-}
-```
-
-Es cierto que esto es un poco más verboso que un simple `v-model`, pero tal es el coste de hacer los cambios de estado explícitos y registrables. Al mismo tiempo, ten en cuenta que Vuex no exige poner todo el estado dentro de un almacén Vuex - si no deseas realizar un seguimiento de las mutaciones por las interacciones de formulario en absoluto, sólo tienes que mantener el estado del formulario fuera de Vuex como estado local del componente, lo que te permite aprovechar libremente `v-model`.

+ 0 - 53
docs/es/getting-started.md

@@ -1,53 +0,0 @@
-# Empezando
-
-En el centro de toda aplicación Vuex está el **almacén**. Un almacén o "store" es básicamente un contenedor que guarda el **estado** de tu aplicación. Hay dos hechos que hacen al almacén Vuex diferente a un objeto global plano:
-
-1. Los almacenes Vuex son reactivos. Cuando los Vue componentes recuperan un estado, el mismo reactiva y eficientemente será actualizado si el estado del almacén cambia.
-
-2. No puedes directamente mutar el estado del almacén. La única manera de cambiar el estado del almacén es despachando explícitamente **mutaciones**. Esto hace cada cambio de estado fácilmente rastreable, y habilita utilidades que nos ayudan a comprender mejor nuestras aplicaciones.
-
-### El almacén más simple
-
-> **NOTA:** Usaremos la sintaxis del ES2015 para los ejemplos de código para el resto de la documentación. Si aún no lo estás usando, [deberías](https://babeljs.io/docs/learn-es2015/)! La documentación además asume que ya estás familiarizado con los conceptos discutidos en [Construyendo Apps de gran envergadura con Vue.js](http://vuejs.org/guide/application.html).
-
-La creación de un almacén Vuex es bastante sencillo - simplemente proporciona un objeto con el estado inicial, y algunas mutaciones:
-
-``` js
-import Vuex from 'vuex'
-
-const state = {
-  count: 0
-}
-
-const mutations = {
-  INCREMENT (state) {
-    state.count++
-  }
-}
-
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-Ahora, puedes acceder el objeto del estado como `store.state`, y ejecutar una mutación despachando su nombre:
-
-``` js
-store.dispatch('INCREMENT')
-
-console.log(store.state.count) // -> 1
-```
-
-Si prefieres despachar con el estilo de objetos, también puedes hacer lo siguiente:
-
-``` js
-// mismo efecto al anterior
-store.dispatch({
-  type: 'INCREMENT'
-})
-```
-
-De nuevo, la razón por la que estamos despachando una mutación en vez cambiar `store.state.count` directamente, es porque queremos explícitamente rastrearlo. Esta simple convención hace tu intención más explícita, para que así puedas razonar mejor sobre cambios de estado en tu app cuando vayas leyendo el código. Adicionalmente, eso nos da la oportunidad de implementar utilidades que puedan registrar cada mutación, tomar instantáneas de estado, o incluso realizar depuraciones con viaje en el tiempo.
-
-Ahora, esto es tan sólo el ejemplo más simple posible de lo que es el almacén. Pero Vuex es más que solamente el almacén. Seguidamente, discutiremos algunos conceptos básicos en profundidad: [Estado](state.md), [Mutaciones](mutations.md) y [Acciones](actions.md).

+ 0 - 44
docs/es/hot-reload.md

@@ -1,44 +0,0 @@
-# Recarga en caliente
-
-Vuex soporta recarga de mutaciones en caliente, módulos, acciones y obtenedores durante el desarrollo, utilizando [Hot Module Replacement API](https://webpack.github.io/docs/hot-module-replacement.html) de Webpack. También puedes utilizarlo en Browserify con el plugin [browserify-hmr](https://github.com/AgentME/browserify-hmr/).
-
-Para las mutaciones y los módulos, es necesario utilizar el método `store.hotUpdate()` del API:
-
-``` js
-// store.js
-import Vue from 'vue'
-import Vuex from 'vuex'
-import mutations from './mutations'
-import moduleA from './modules/a'
-
-Vue.use(Vuex)
-
-const state = { ... }
-
-const store = new Vuex.Store({
-  state,
-  mutations,
-  modules: {
-    a: moduleA
-  }
-})
-
-if (module.hot) {
-  // aceptar acciones y mutaciones como módulos en caliente
-  module.hot.accept(['./mutations', './modules/a'], () => {
-    // requieren los módulos actualizados
-    // hay que añadir .default aquí debido a la producción del módulo de babel 6
-    const newMutations = require('./mutations').default
-    const newModuleA = require('./modules/a').default
-    // intercambio de las nuevas acciones y mutaciones
-    store.hotUpdate({
-      mutations: newMutations,
-      modules: {
-        a: newModuleA
-      }
-    })
-  })
-}
-```
-
-No tienes que hacer nada específico para acciones y obtenedores. El sistema de reemplazo de módulo en caliente de Webpack "empujará" los cambios hasta la cadena de dependencias - y los cambios en las acciones y obtenedores subirán a los componentes Vue que los importaron. Dado que los componentes Vue cargados a través de `vue-loader` son recargables en caliente por defecto, estos componentes afectados se recargarán en caliente a sí mismos y usarán las acciones y obtenedores actualizados.

+ 0 - 13
docs/es/intro.md

@@ -1,13 +0,0 @@
-## Qué es Vuex?
-
-Vuex es una arquitectura para el desarrollo de aplicaciones en Vue.js con manejo de estado centralizado. Está inspirado en [Flux](https://facebook.github.io/flux/) y [Redux](https://github.com/rackt/redux), pero con conceptos simplificados e implementación diseñada específicamente para tomar ventaja del sistema reactivo de Vue.js.
-
-## Por qué lo necesito?
-
-Si tu app es simple, quizás no necesites Vuex. No lo apliques prematuramente. Pero si estás construyendo un SPA de medio-grandes dimensiones, probablemente te hayas encontrado en situaciones que te han hecho pensar en cómo mejor estructuras las cosas fuera de tu componente Vue. Aquí es donde Vuex entra en juego.
-
-Cuando usamos Vue.js a solas, a menudo tendemos a almacenar el estado "dentro" de nuestros componentes. Lo que significa, cada componente guarda una pieza del estado de nuestra aplicación, y como resultado el estado es dispersado por todos lados. Sin embargo, a veces una parte del estado necesita ser compartido por múltiples componentes. Una práctica común es dejar que un componente "envíe" algún estado a otros componentes usando el sistema de eventos personalizado. El problema con este patrón es que el flujo de eventos dentro de grandes ramas de componentes puede volverse complejo rápidamente, y a menudo es difícil encontrar la causa cuando algo va mal.
-
-Para tratar mejor estados compartidos en grandes aplicaciones, necesitamos diferenciar entre **estado local del componente** y **estado a nivel de aplicación**. El estado de aplicación no pertenece a un componente específico, pero nuestros componentes pueden observarlo para actualizaciones de DOM reactivos. Centralizando su manejo en un único sitio, no necesitamos ir pasando eventos, porque todo lo que afecta a más de un componente debería pertenecer allí. En adición esto nos permite grabar e inspeccionar cada mutación para un entendimiento más fácil de los cambios de estado, e incluso poner en práctica cosas avanzadas como la depuración con viaje en el tiempo.
-
-Vuex también pone en vigor algunas opiniones sobre cómo dividir la lógica de la administración del estado en diferentes lugares, pero aun así permite suficiente flexibilidad para la estructura del código actual.

+ 0 - 83
docs/es/middlewares.md

@@ -1,83 +0,0 @@
-# Middlewares
-
-Almacenes Vuex aceptan la opción `middlewares` que expone ganchos para cada mutación (Ten en cuenta que esto no tiene ninguna relación con Redux middlewares). Vuex middleware es simplemente un objeto que implementa algunas funciones de gancho:
-
-``` js
-const myMiddleware = {
-  onInit (state, store) {
-    // registar estado inicial
-  },
-  onMutation (mutation, state, store) {
-    // llamado después de cada mutación.
-    // La mutación viene en formato { type, payload }
-  }
-}
-```
-
-Y puede ser utilizado de esta manera:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  middlewares: [myMiddleware]
-})
-```
-
-Por defecto, un middleware recibe el objeto `state` real. Un middleware también puede recibir el `store` en sí con el fin de despachar mutaciones. Ya que los middlewares se utilizan principalmente para fines de depuración o la persistencia de datos, a los mismos **no se les permite mutar el estado**.
-
-A veces, un middleware puede querer recibir "instantáneas" del estado, y también comparar el estado post-mutación con el estado pre-mutación. Tal middlewares deben declarar la opción `snapshot: true`:
-
-``` js
-const myMiddlewareWithSnapshot = {
-  snapshot: true,
-  onMutation (mutation, nextState, prevState, store) {
-    // nextState y prevState son instantáneas de profunda clonación
-    // del estado antes y después de la mutación.
-  }
-}
-```
-
-**Middlewares que toman instantáneas del estado deben utilizarse sólo durante el desarrollo.** Usando Webpack o Browserify, podemos dejar que nuestras herramientas de compilación lo manejen por nosotros:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  middlewares: process.env.NODE_ENV !== 'production'
-    ? [myMiddlewareWithSnapshot]
-    : []
-})
-```
-
-El middleware será utilizado por defecto. Para la producción, utilice la configuración de compilación descrita [aquí](http://vuejs.org/guide/application.html#Deploying-for-Production) para convertir el valor de `process.env.NODE_ENV! == 'Production'` a `false` para la versión final.
-
-### Middleware registrador incorporado
-
-Vuex viene con un middleware registrador para la depuración común:
-
-``` js
-import createLogger from 'vuex/logger'
-
-const store = new Vuex.Store({
-  middlewares: [createLogger()]
-})
-```
-
-La función `createLogger` toma algunas opciones:
-
-``` js
-const logger = createLogger({
-  collapsed: false, // auto expande mutaciones registradas
-  transformer (state) {
-    // transforma el estado antes de registrarlo.
-    // por ejemplo devuelve sólo un sub-árbol específico
-    return state.subTree
-  },
-  mutationTransformer (mutation) {
-    // las mutaciones se registran en el formato de { type, payload }
-    // podemos formatearlo en el modo que queramos.
-    return mutation.type
-  }
-})
-```
-
-Ten en cuenta que el middleware registrador toma instantáneas del estado, así que utilizalo sólo durante el desarrollo.

+ 0 - 164
docs/es/mutations.md

@@ -1,164 +0,0 @@
-# Mutaciones
-
-Las mutaciones Vuex son esencialmente eventos: cada mutación tiene un **nombre** y un **manejador**. La función del manejador recibirá el estado como el primer argumento:
-
-``` js
-import Vuex from 'vuex'
-
-const store = new Vuex.Store({
-  state: {
-    count: 1
-  },
-  mutations: {
-    INCREMENT (state) {
-      // mutar estado
-      state.count++
-    }
-  }
-})
-```
-
-El uso de mayúsculas para los nombres de mutación es sólo una convención para que sea más fácil diferenciarlos de las funciones planas.
-
-No puedes llamar directamente a un manejador de mutación. Las opciones aquí son más bien un registro de eventos: "Cuando un evento `INCREMENT` es despachado, llama a este manejador." Para invocar un manejador de mutación, es necesario despachar un evento de mutación:
-
-``` js
-store.dispatch('INCREMENT')
-```
-
-### Despachar con argumentos
-
-También es posible pasar argumentos:
-
-``` js
-// ...
-mutations: {
-  INCREMENT (state, n) {
-    state.count += n
-  }
-}
-```
-``` js
-store.dispatch('INCREMENT', 10)
-```
-
-Aquí `10` será pasado al controlador de la mutación como el segundo argumento siguiendo `state`. Lo mismo para cualquier argumento adicional. Estos argumentos se denominan **carga útil** o "payload" para la mutación dada.
-
-### Despacho al estilo objeto
-
-> requiere >=0.6.2
-
-También puedes despachar mutaciones utilizando objetos:
-
-``` js
-store.dispatch({
-  type: 'INCREMENT',
-  payload: 10
-})
-```
-
-Ten en cuenta que cuando uses el estilo objeto debes incluir todos los argumentos como propiedades en el objeto despachado. El objeto entero será pasado como el segundo argumento a los manipuladores de mutación:
-
-``` js
-mutations: {
-  INCREMENT (state, mutation) {
-    state.count += mutation.payload
-  }
-}
-```
-
-### Despacho silencioso
-
-> requiere >=0.6.3
-
-En algunos casos puede que no desees que los middlewares registren el cambio de estado. Múltiples despachos al almacén en un período corto o encuestados no siempre tienen que ser rastreados. En estas situaciones puede considerarse apropiado silenciar las mutaciones.
-
-*Nota:* Esto debería evitarse cuando sea necesario. Las mutaciones silenciosas rompen el contrato de todos los cambios de estado siendo rastreados por el devtool. Utilizar con moderación y cuando sea absolutamente necesario.
-
-Despachar sin golpear middlewares se puede lograr con un indicador `silent`.
-
-``` js
-/**
- * Ejemplo: Acción de progreso.
- * Despacha a menudo cambios que no necesariamente deben ser rastreados
- **/
-export function start(store, options = {}) {
-  let timer = setInterval(() => {
-    store.dispatch({
-      type: INCREMENT,
-      silent: true,
-      payload: {
-        amount: 1,
-      },
-    });
-    if (store.state.progress === 100) {
-      clearInterval(timer);
-    }
-  }, 10);
-}
-```
-
-### Las mutaciones siguen las reglas de reactividad de Vue
-
-Dado que el estado de almacenes Vuex es hecho reactivo por Vue, cuando mutamos el estado, componentes Vue que estén observando el estado se actualizarán automáticamente. Esto también significa que las mutaciones Vuex están sujetas a las mismas advertencias de reactividad que cuando se trabaja con Vue a secas:
-
-1. Prefiere inicializar el estado inicial de tu almacén con todos los campos deseados por adelantado.
-
-2. Cuando se añaden nuevas propiedades a un Objeto, deberás:
-
-  - Usar `Vue.set(obj, 'newProp', 123)`, o -
-
-  - Sustituir ese Objeto con uno nuevo. Por ejemplo, usando la etapa-2 [sintaxis de objetos de propagación](https://github.com/sebmarkbage/ecmascript-rest-spread) podemos escribirla así:
-
-  ``` js
-  state.obj = { ...state.obj, newProp: 123 }
-  ```
-
-### Usando constantes para los nombres de mutación
-
-También es común el uso de constantes para los nombres de mutación - permiten al código tomar ventaja de herramientas como linters, y poniendo todas las constantes en un archivo único permite a tus colaboradores obtener de un vistazo qué mutaciones son posibles en toda la aplicación:
-
-``` js
-// mutation-types.js
-export const SOME_MUTATION = 'SOME_MUTATION'
-```
-
-``` js
-// store.js
-import Vuex from 'vuex'
-import { SOME_MUTATION } from './mutation-types'
-
-const store = new Vuex.Store({
-  state: { ... },
-  actions: { ... },
-  mutations: {
-    // podemos utilizar la función nombre de propiedad computerizada del ES2015
-    // para usar una constante como el nombre de la función
-    [SOME_MUTATION] (state) {
-      // mutar estado
-    }
-  }
-})
-```
-
-Utilizar constantes es en gran parte una preferencia - puede ser útil en grandes proyectos con muchos desarrolladores, pero es totalmente opcional si no te gustan.
-
-### Las mutaciones deben ser síncronas
-
-Una regla importante a recordar es que **las funciones de controlador de mutación deben ser síncronas**. ¿Por qué? Considera el siguiente ejemplo:
-
-``` js
-mutations: {
-  SOME_MUTATION (state) {
-    api.callAsyncMethod(() => {
-      state.count++
-    })
-  }
-}
-```
-
-Ahora imaginemos que estamos depurando la app y mirando nuestros registros de mutación. Por cada mutación anotada, queremos ser capaces de comparar capturas de estado *antes* y *después* de la mutación. Sin embargo, la retrollamada asíncrona dentro de la mutación del ejemplo anterior lo hace imposible: la retrollamada no es ejecutada todavía cuando la mutación es despachada, y no sabemos cuándo la retrollamada será realmente ejecutada. Cualquier mutación de estado realizada en la retrollamada es esencialmente no rastreable!
-
-### Sobre acciones
-
-Asincronía combinada con mutación de estado puede hacer que tu programa sea muy difícil de razonar. Por ejemplo, cuando llames a dos métodos los dos con devoluciones de llamada asíncronas que mutan el estado, ¿cómo sabes cuando son llamadas y cual retrollamada se ejecutó primero? Esto es exactamente por lo que queremos separar los dos conceptos. En Vuex, llevamos a cabo todas las mutaciones de estado de manera síncrona. Realizaremos todas las operaciones asíncronas dentro de [acciones](actions.md).

+ 0 - 156
docs/es/state.md

@@ -1,156 +0,0 @@
-# Estado y obtenedores
-
-### Árbol de único estado
-
-Vuex utiliza un **árbol de único estado** - es decir, este único objeto contiene todo el estado a nivel de aplicación y sirve como la "única fuente de la verdad". Esto también significa que por lo general vas a tener sólo un almacén para cada aplicación. Un árbol de único estado hace que sea fácil de localizar una parte específica del estado, y nos permite tomar fácilmente instantáneas del estado actual de la aplicación para fines de depuración.
-
-The single state tree does not conflict with modularity - in later chapters we will discuss how to split your state and mutations into sub modules.
-
-### Obteniendo el estado Vuex en componentes Vue
-
-Entonces, ¿cómo mostrar el estado del almacén en nuestros componentes Vue? Ya que los almacenes Vuex son reactivos, la forma más sencilla de "recuperar" un estado del mismo es simplemente devolviendo un estado desde una [propiedad computarizada](http://vuejs.org/guide/computed.html):
-
-``` js
-// en la definición del componente Vue
-computed: {
-  count: function () {
-    return store.state.count
-  }
-}
-```
-
-Siempre que `store.state.count` cambie, hará que la propiedad computarizada sea reevaluada, y active las actualizaciones de DOM asociadas.
-
-Sin embargo, este modelo implica que el componente dependa de un almacén global. Eso hace que sea más difícil testear el componente, y también que sea difícil ejecutar varias instancias de la aplicación utilizando el mismo conjunto de componentes. En aplicaciones de gran tamaño, es posible que queramos "inyectar" el almacén en componentes hijos desde el componente raíz. He aquí cómo hacerlo:
-
-1. Instala Vuex y conecta tu componente raíz al almacén:
-
-  ``` js
-  import Vue from 'vue'
-  import Vuex from 'vuex'
-  import store from './store'
-  import MyComponent from './MyComponent'
-
-  // importante, enseña al componente Vue
-  // cómo manejar opciones relacionadas con Vuex
-  Vue.use(Vuex)
-
-  var app = new Vue({
-    el: '#app',
-    // proporciona el almacén utilizando la opción "store".
-    // esto inyectará la instancia del almacén a todos los componentes hijos.
-    store,
-    components: {
-      MyComponent
-    }
-  })
-  ```
-
-  Al proveer la opción `store` a la instancia raíz, el almacén será inyectado a todos sus componentes hijos y estará disponible en ellos como `this.$store`. Sin embargo, es poco probable que vayamos a necesitar referenciarlo.
-
-2. Dentro de los componentes hijos, recupera el estado con funciones **obtenedor** en la opción `vuex.getters`:
-
-  ``` js
-  // MyComponent.js
-  export default {
-    template: '...',
-    data () { ... },
-    // aquí es donde recuperamos el estado del almacén
-    vuex: {
-      getters: {
-        // una función obtenedor del almacén, que
-        // asigna `store.state.count` en el componente como `this.count`
-        count: function (state) {
-          return state.count
-        }
-      }
-    }
-  }
-  ```
-
-  Nota el bloque de opción especial `vuex`. Aquí es donde especificamos el estado que el componente va a utilizar del almacén. Para cada nombre de propiedad, especificamos una función obtenedor que recibe todo el árbol del almacén como único argumento, y entonces selecciona y devuelve parte del estado, o un valor computarizado derivado del estado. El resultado devuelto será establecido en el componente utilizando el nombre de la propiedad, al igual que una propiedad computarizada.
-
-  En muchos casos, la función "obtenedor" puede ser muy sucinta usando las funciones de dirección del ES2015:
-
-  ``` js
-  vuex: {
-    getters: {
-      count: state => state.count
-    }
-  }
-  ```
-
-### Obtenedores deben ser puros
-
-Todos los obtenedores de Vuex deben ser [funciones puras](https://en.wikipedia.org/wiki/Pure_function) - las mismas toman todo el árbol del estado, y devuelven algún valor basado exclusivamente en ese estado. Esto los hace más testeables, componibles y eficientes. También significa que **no puedes apoyarte en `this` dentro de obtenedores**.
-
-Si necesitas acceso a `this`, por ejemplo para calcular el estado derivado basado en el estado local o los props del componente, es necesario definir propiedades computarizadas, llanas por separado:
-
-``` js
-vuex: {
-  getters: {
-    currentId: state => state.currentId
-  }
-},
-computed: {
-  isCurrent () {
-    return this.id === this.currentId
-  }
-}
-```
-
-### Obtenedores pueden devolver estado derivado
-
-Obtenedores de estado Vuex son, en el fondo, propiedades computarizadas, esto significa que puedes apoyarte en ellos para que de manera reactiva (y eficiente) calculen un estado derivado. Por ejemplo, digamos que en el estado tenemos una colección `messages` que contienen todos los mensajes, y un `currentThreadID` representando el hilo que está siendo visto por el usuario. Lo que queremos mostrar al usuario es una lista filtrada de mensajes que pertenecen al hilo actual:
-
-``` js
-vuex: {
-  getters: {
-    filteredMessages: state => {
-      return state.messages.filter(message => {
-        return message.threadID === state.currentThreadID
-      })
-    }
-  }
-}
-```
-
-Dado que las propiedades computarizadas de Vue.js se almacenan en caché de forma automática y sólo reevaluadas cuando una dependencia reactiva cambie, no necesitas preocuparte de que esta función sea llamada en cada mutación.
-
-### Compartiendo obtenedores a través de múltiples componentes
-
-Como puedes ver, el obtenedor `filteredMessages` puede ser útil dentro de múltiples componentes. En ese caso, es una buena idea compartir la misma función entre ellos:
-
-``` js
-// getters.js
-export function filteredMessages (state) {
-  return state.messages.filter(message => {
-    return message.threadID === state.currentThreadID
-  })
-}
-```
-
-``` js
-// en un componente...
-import { filteredMessages } from './getters'
-
-export default {
-  vuex: {
-    getters: {
-      filteredMessages
-    }
-  }
-}
-```
-
-Debido a que los obtenedores son puros, los obtenedores compartidos a través de múltiples componentes se almacenan en caché de manera eficiente: cuando cambian las dependencias, sólo son reevaluados una vez para todos los componentes que los utilizan.
-
-> Referencias Flux: obtenedores Vuex pueden ser aproximadamente comparados con [`mapStateToProps`](https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) en Redux. Sin embargo, debido a que se apoyan en propiedades computarizadas de Vue, son más eficientes que `mapStateToProps`, y más similares a [reselect](https://github.com/reactjs/reselect).
-
-### A los componentes no se les permite mutar directamente el estado
-
-Es importante recordar que los **componentes nunca deberían mutar el estado del almacén Vuex directamente**. Porque queremos que toda mutación de estado sea explícita y rastreable, todas las mutaciones de estado del almacén Vuex deben llevarse a cabo dentro de los manipuladores de mutación del almacén.
-
-Para ayudar a imponer esta regla, cuando en [Modo estricto](strict.md), si el estado de almacén es mutado fuera de sus manipuladores de mutación, Vuex mostrará un error.
-
-Con esta regla en lugar, nuestros componentes Vue ahora tienen mucha menos responsabilidad: están conectados al estado del almacén Vuex a través de obtenedores de sólo lectura, y la única manera que tienen de afectar el estado es activando de alguna manera **mutaciones** (que veremos más adelante). Aún pueden poseer y operar en su estado local si es necesario, pero ya no ponemos ninguna lógica de data-fetching o mutación de estado global dentro de los componentes individuales. Ellos ahora están centralizados y manejados dentro de archivos relacionados con Vuex, lo que hace grandes aplicaciones más fáciles de entender y mantener.

+ 0 - 25
docs/es/strict.md

@@ -1,25 +0,0 @@
-# Modo estricto
-
-Para activar el modo estricto, simplemente establece `strict: true` al crear un almacén Vuex:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  strict: true
-})
-```
-
-En modo estricto, cada vez que el estado Vuex es mutado fuera de los manipuladores de mutación, un error será emitido. Esto asegura que todas las mutaciones del estado pueden ser explícitamente rastreadas por las herramientas de depuración.
-
-### Desarrollo frente a producción
-
-**¡No actives el modo estricto cuando compiles para producción!** El modo estricto ejecuta una observación en profundidad del árbol de estado para detectar mutaciones inapropiadas - asegúrate de apagarlo en producción para evitar el costo de rendimiento.
-
-Al igual que con middlewares, podemos dejar que las herramientas de compilación lo manejen:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  strict: process.env.NODE_ENV !== 'production'
-})
-```

+ 0 - 136
docs/es/structure.md

@@ -1,136 +0,0 @@
-# Estructura de la aplicación
-
-Vuex en realidad no restringe la forma de estructurar tu código. Más bien, hace cumplir un conjunto de principios de alto nivel:
-
-1. El estado de la aplicación es retenido en el almacén, como un solo objeto.
-
-2. La única forma de mutar el estado es despachando mutaciones en el almacén.
-
-3. Las mutaciones deben ser síncronas, y los únicos efectos secundarios que producen debería ser mutar el estado.
-
-4. Podemos exponer una API de mutación de estado más expresiva mediante la definición de acciones. Las acciones pueden encapsular lógica asincrónica como ir a buscar los datos, y los únicos efectos secundarios que producen debería ser despachar mutaciones.
-
-5. Los componentes utilizan obtenedores para recuperar el estado del almacén, y llaman acciones para mutar el estado.
-
-Lo bueno de las mutaciones Vuex, acciones y obtenedores es que **todos ellos son simplemente funciones**. Mientras sigas estas reglas, depende de ti cómo estructurar tu proyecto. Sin embargo, es bueno tener algunas convenciones para que puedas familiarizarte al instante con otro proyecto que utilice Vuex, así que aquí tienes algunas estructuras recomendadas en función de la escala de tu aplicación.
-
-### Proyecto simple
-
-Para un proyecto sencillo, simplemente podemos definir el **almacén** y las **acciones** en los archivos respectivos:
-
-``` bash
-.
-├── index.html
-├── main.js
-├── components
-│   ├── App.vue
-│   └── ...
-└── vuex
-    ├── store.js     # exporta el almacén (con el estado inicial y mutaciones)
-    └── actions.js   # exporta todas las acciones
-```
-
-Para un ejemplo real, echa un vistazo al [ejemplo Contador](https://github.com/vuejs/vuex/tree/master/examples/counter) o al [ejemplo TodoMVC](https://github.com/vuejs/vuex/tree/master/examples/todomvc).
-
-Como alternativa, también puedes separar las mutaciones en su propio archivo.
-
-### Proyecto mediano o grande
-
-Para cualquier aplicación no trivial, es probable que queramos seguir dividiendo aún más el código relacionado con Vuex en múltiples "módulos" (más o menos comparable a "almacenes" en vainilla Flux, y "reductores" en Redux), cada uno dedicado a un dominio específico de nuestra aplicación. Cada módulo estaría administrando un sub-árbol del estado, exportando el estado inicial para ese sub-árbol y todas las mutaciones que operan en ese sub-árbol:
-
-``` bash
-├── index.html
-├── main.js
-├── api
-│   └── ... # abstracciones para hacer solicitudes de API
-├── components
-│   ├── App.vue
-│   └── ...
-└── vuex
-    ├── actions.js        # exporta todas las acciones
-    ├── store.js          # donde montamos los módulos y exportamos el almacén
-    ├── mutation-types.js # constantes
-    └── modules
-        ├── cart.js       # estado y mutaciones para el carro
-        └── products.js   # estado y mutaciones para los productos
-```
-
-Un módulo típico luce así:
-
-``` js
-// vuex/modules/products.js
-import {
-  RECEIVE_PRODUCTS,
-  ADD_TO_CART
-} from '../mutation-types'
-
-// estado inicial
-const state = {
-  all: []
-}
-
-// mutaciones
-const mutations = {
-  [RECEIVE_PRODUCTS] (state, products) {
-    state.all = products
-  },
-
-  [ADD_TO_CART] (state, productId) {
-    state.all.find(p => p.id === productId).inventory--
-  }
-}
-
-export default {
-  state,
-  mutations
-}
-```
-
-Y en `vuex/store.js`, "ensamblamos" múltiples módulos juntos para crear la instancia Vuex:
-
-``` js
-// vuex/store.js
-import Vue from 'vue'
-import Vuex from '../../../src'
-// importa partes de los módulos
-import cart from './modules/cart'
-import products from './modules/products'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  // combina sub-módulos
-  modules: {
-    cart,
-    products
-  }
-})
-```
-
-Aquí, el estado inicial del módulo `cart` será adjuntado al árbol raíz del estado como `store.state.cart`. Además, **todas las mutaciones definidas en un sub-módulo solamente reciben el estado del sub-árbol al que están asociadas**. Así mutaciones definidas en el módulo `cart` recibirán `store.state.cart` como primer argumento.
-
-La raíz del estado del sub-árbol es insustituible dentro del propio módulo. Por ejemplo esto no funcionará:
-
-``` js
-const mutations = {
-  SOME_MUTATION (state) {
-    state = { ... }
-  }
-}
-```
-
-En su lugar, siempre almacena el estado concreto como una propiedad de la raíz del sub-árbol:
-
-``` js
-const mutations = {
-  SOME_MUTATION (state) {
-    state.value = { ... }
-  }
-}
-```
-
-Dado que todos los módulos simplemente exportan objetos y funciones, son bastante fáciles de probar y mantener, y pueden ser recargados en vivo. También eres libre de alterar los patrones utilizados aquí para encontrar una estructura que se adapte a tus preferencias.
-
-Ten en cuenta que no ponemos las acciones en módulos, ya que una sola acción puede despachar mutaciones que afectan a múltiples módulos. Es también una buena idea desacoplar las acciones de la forma del estado y los detalles de implementación de mutaciones para una mejor separación de los cometidos. Si el archivo de acciones se hace demasiado grande, podemos convertirlo en una carpeta y separar las implementaciones de acciones asíncronas largas en archivos individuales.
-
-Para un ejemplo real, echa un vistazo al [ejemplo Carrito](https://github.com/vuejs/vuex/tree/master/examples/shopping-cart).

+ 0 - 167
docs/es/testing.md

@@ -1,167 +0,0 @@
-# Probando
-
-Las partes principales por las que queremos pasar las unidades de prueba en Vuex son mutaciones y acciones.
-
-### Probando las mutaciones
-
-Las mutaciones son muy fáciles de probar, ya que son sólo funciones que dependen completamente de sus argumentos. Un truco es que si estás usando módulos ES2015 y pones tus mutaciones dentro de tu archivo `store.js`, en adición a la exportación por defecto, también puedes exportar las mutaciones como una exportación nombrada:
-
-``` js
-const state = { ... }
-
-// exporta las mutaciones como una exportación nombrada
-export const mutations = { ... }
-
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-Ejemplo probando una mutación usando Mocha + Chai (puedes utilizar cualquier biblioteca/aserción que quieras):
-
-``` js
-// mutations.js
-export const INCREMENT = state => state.count++
-```
-
-``` js
-// mutations.spec.js
-import { expect } from 'chai'
-import { mutations } from './store'
-
-// asignación mutaciones destructurada
-const { INCREMENT } = mutations
-
-describe('mutations', () => {
-  it('INCREMENT', () => {
-    // estado simulado
-    const state = { count: 0 }
-    // aplicar mutación
-    INCREMENT(state)
-    // asegurar resultado
-    expect(state.count).to.equal(1)
-  })
-})
-```
-
-### Probando acciones
-
-Las acciones pueden ser un poco más complejas ya que pueden llamar APIs externas. Cuando probamos acciones, por lo general tenemos que hacer un cierto nivel de simulación - por ejemplo, podemos abstraer las llamadas a la API en un servicio y simular ese servicio dentro de nuestras pruebas. Con el fin de simular fácilmente las dependencias, podemos utilizar Webpack e [inject-loader](https://github.com/plasticine/inject-loader) para compilar nuestros archivos de pruebas.
-
-Ejemplo probando una acción asíncrona:
-
-``` js
-// actions.js
-import shop from '../api/shop'
-
-export const getAllProducts = ({ dispatch }) => {
-  dispatch('REQUEST_PRODUCTS')
-  shop.getProducts(products => {
-    dispatch('RECEIVE_PRODUCTS', products)
-  })
-}
-```
-
-``` js
-// actions.spec.js
-
-// usa la sintaxis 'require' para los cargadores en línea.
-// con inject-loader, esto devuelve un 'module factory'
-// que nos permite inyectar dependencias simuladas.
-import { expect } from 'chai'
-const actionsInjector = require('inject!./actions')
-
-// crea el módulo con nuestras simulaciones
-const actions = actionsInjector({
-  '../api/shop': {
-    getProducts (cb) {
-      setTimeout(() => {
-        cb([ /* mocked response */ ])
-      }, 100)
-    }
-  }
-})
-
-// helper para probar la acción con mutaciones esperadas
-const testAction = (action, args, state, expectedMutations, done) => {
-  let count = 0
-  // simular despacho
-  const dispatch = (name, ...payload) => {
-    const mutation = expectedMutations[count]
-    expect(mutation.name).to.equal(name)
-    if (payload) {
-      expect(mutation.payload).to.deep.equal(payload)
-    }
-    count++
-    if (count >= expectedMutations.length) {
-      done()
-    }
-  }
-  // llama a la acción con almacén y argumentos simulados
-  action({dispatch, state}, ...args)
-
-  // comprobar si no deberían haber sido despachadas mutaciones
-  if (expectedMutations.length === 0) {
-    expect(count).to.equal(0)
-    done()
-  }
-}
-
-describe('actions', () => {
-  it('getAllProducts', done => {
-    testAction(actions.getAllProducts, [], {}, [
-      { name: 'REQUEST_PRODUCTS' },
-      { name: 'RECEIVE_PRODUCTS', payload: [ /* respuesta simulada */ ] }
-    ], done)
-  })
-})
-```
-
-### Ejecutando pruebas
-
-Si tus mutaciones y acciones son correctamente escritos, las pruebas deberían no tener dependencia directa de las APIs de navegador después de una simulación apropiada. De esta manera puedes simplemente agrupar las pruebas con Webpack y ejecutarlas directamente en Node. Como alternativa, puedes usar `mocha-loader` o Karma + `karma-webpack` para ejecutar las pruebas en navegadores reales.
-
-#### Ejecutando en Node
-
-Crea la siguiente configuración webpack:
-
-``` js
-module.exports = {
-  entry: './test.js',
-  output: {
-    path: __dirname,
-    filename: 'test-bundle.js'
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        loader: 'babel',
-        exclude: /node_modules/
-      }
-    ]
-  },
-  babel: {
-    presets: ['es2015']
-  }
-}
-```
-
-Entonces:
-
-``` bash
-webpack
-mocha test-bundle.js
-```
-
-#### Ejecutando en navegadores
-
-1. Instala `mocha-loader`
-2. Cambia el `entry` de la configuración de Webpack anterior a `'mocha!babel!./test.js'`.
-3. Inicia `webpack-dev-server` utilizando la configuración
-4. Ves a `localhost:8080/webpack-dev-server/test-bundle`.
-
-#### Ejecutando en navegador con Karma + karma-webpack
-
-Consulta la configuración en la documentación de [vue-loader](http://vuejs.github.io/vue-loader/workflow/testing.html).

+ 0 - 265
docs/es/tutorial.md

@@ -1,265 +0,0 @@
-# Tutorial
-
-Vamos a construir una aplicación muy sencilla utilizando Vuex para entender cómo usarlo. Para este ejemplo, estamos construyendo una aplicación en la que pulsas un botón, e incrementa un contador.
-
-![Resultados finales](tutorial/result.png)
-
-Estamos utilizando este sencillo ejemplo para explicar los conceptos y los problemas que Vuex pretende resolver - cómo manejar una gran aplicación que utiliza varios componentes. Considere si este ejemplo utiliza tres componentes:
-
-### `components/App.vue`
-
-El componente raíz, que contiene otros dos componentes hijos:
-
-* `Display` para visualizar el valor actual del contador.
-* `Increment` que es un botón para aumentar el valor actual.
-
-```html
-<template>
-  <div>
-    <Display></Display>
-    <Increment></Increment>
-  </div>
-</template>
-
-<script>
-
-import Display from './Display.vue'
-import Increment from './Increment.vue'
-
-export default {
-  components: {
-    Display: Display,
-    Increment: Increment
-  }
-}
-</script>
-```
-
-### `components/Display.vue`
-
-```html
-<template>
-  <div>
-    <h3>Recuento es 0</h3>
-  </div>
-</template>
-
-<script>
-export default {
-}
-</script>
-```
-
-### `components/Increment.vue`
-
-```html
-<template>
-  <div>
-    <button>Incrementar +1</button>
-  </div>
-</template>
-
-<script>
-export default {
-}
-</script>
-```
-
-### Desafíos sin Vuex
-
-* `Increment` y `Display` no son conscientes el uno del otro, y no pueden pasar mensajes entre sí.
-* `App` tendrá que utilizar eventos y transmisiones para coordinar los dos componentes.
-* Dado que `App` está coordinando entre los dos componentes, los mismos no son reutilizables y fuertemente acoplados. La reestructuración de la aplicación podría romperlo.
-
-### El "flujo" de Vuex
-
-Estos son los pasos que se llevan a cabo en orden:
-
-![El flujo de Vuex](tutorial/vuex_flow.png)
-
-Esto puede parecer un poco excesivo para incrementar un contador. Pero ten en cuenta que estos conceptos funcionan bien en aplicaciones de mayor tamaño, mejorando la mantenibilidad y haciendo la aplicación más fácil de depurar y mejorar a largo plazo. Así que vamos a modificar nuestro código para utilizar Vuex.
-
-### Paso 1: Añadir un almacén
-
-El almacén contiene los datos de la aplicación. Todos los componentes leen los datos del almacén. Antes de comenzar, instala Vuex a través del npm:
-
-```
-$ npm install --save vuex
-```
-
-Crea un nuevo archivo en `vuex/store.js`
-
-```js
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-// Haz Vue consciente de Vuex
-Vue.use(Vuex)
-
-// Crea un objeto conteniendo el estado inicial
-// para cuando la app es iniciada
-const state = {
-  // TODO: Configurar el estado inicial
-}
-
-// Crea un objeto almacenando varias mutaciones. Escribe la mutación
-const mutations = {
-  // TODO: Configura las mutaciones
-}
-
-// Combina el estado inicial y las mutaciones para crear un almacén Vuex
-// Este almacén puede puede vincularse a nuestra app
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-Tenemos que hacer que nuestra aplicación sea consciente de este almacén. Para ello simplemente tenemos que modificar nuestro componente raíz.
-
-Edita `components/App.vue` y añade el almacén.
-
-```js
-import Display from './Display.vue'
-import Increment from './IncrementButton.vue'
-import store from '../vuex/store' // importa el almacén que acabamos de crear
-
-export default {
-  components: {
-    Display: Display,
-    Increment: Increment
-  },
-  store: store // hace que este y todos los componentes hijos sean conscientes del nuevo almacén
-}
-```
-
-> **Consejo**: Con ES6 y babel puedes escribirlo como
->
->     components: {
->       Display,
->       Increment,
->     },
->     store
-
-### Paso 2: Configurar la acción
-
-La acción es una función que se llama desde el componente. Las funciones de acción pueden desencadenar cambios en el almacén despachando la mutación correcta. Una acción también puede hablar con backends HTTP y leer otros datos del almacén antes de despachar actualizaciones.
-
-Crear un nuevo archivo en `vuex/actions.js` con una sola función `incrementCounter`.
-
-```js
-// Una acción recibirá el almacén como el primer argumento.
-// Puesto que sólo estamos interesados en el despacho (y opcionalmente el estado)
-// podemos tirar de esos dos parámetros con la función de desestructuración del ES6
-export const incrementCounter = function ({ dispatch, state }) {
-  dispatch('INCREMENT', 1)
-}
-```
-
-Y vamos a llamar a la acción desde nuestro componente `components/Increment.vue`.
-
-```html
-<template>
-  <div>
-    <button @click='increment'>Incrementar +1</button>
-  </div>
-</template>
-
-<script>
-import { incrementCounter } from '../vuex/actions'
-export default {
-  vuex: {
-    actions: {
-      increment: incrementCounter
-    }
-  }
-}
-</script>
-```
-
-Notar algunas cosas interesantes acerca de lo que acabamos de añadir.
-
-1. Tenemos un nuevo objeto `vuex.actions` que incluye la nueva acción.
-2. No especificamos qué almacén, objeto, estado, etc. Vuex se encarga de todo por nosotros.
-3. Podemos llamar la acción mediante `this.increment()` en cualquier método.
-4. También podemos llamar la acción utilizando el parámetro `@click` haciendo de `increment` un método regular del componente.
-5. La acción se llama `incrementCounter`, pero podemos utilizar cualquier nombre apropiado.
-
-### Paso 3: Configura el estado y las mutaciones
-
-En nuestro archivo `vuex/actions.js` despachamos la mutación `INCREMENT` pero no hemos escrito todavía cómo manejarla. Hagamos eso ahora.
-
-Edita `vuex/store.js`.
-
-```js
-const state = {
-  // Cuando la app es iniciada, count se establece en 0
-  count: 0
-}
-
-const mutations = {
-  // Una mutación recibe el estado actual como el primer argumento
-  // Puedes hacer cualquier modificación que desees dentro de esta función
-  INCREMENT (state, amount) {
-    state.count = state.count + amount
-  }
-}
-```
-
-### Paso 4: Obtener el valor en el componente
-
-Crea un nuevo archivo llamado `vuex/getters.js`.
-
-```js
-// Este captador es una función que solamente devuelve el recuento
-// Con ES6 también puedes escribirlo como:
-// export const getCount = state => state.count
-
-export function getCount (state) {
-  return state.count
-}
-```
-
-Esta función devuelve parte del objeto de estado que es de interés - el recuento actual. Ahora podemos utilizar este captador dentro del componente.
-
-Edita `components/Display.vue`
-
-```html
-<template>
-  <div>
-    <h3>Recuento es {{ counterValue }}</h3>
-  </div>
-</template>
-
-<script>
-import { getCount } from '../vuex/getters'
-export default {
-  vuex: {
-    getters: {
-      // notar que estás pasando la función en sí misma, y no el valor 'getCount()'
-      counterValue: getCount
-    }
-  }
-}
-</script>
-```
-
-Hay un nuevo objeto `vuex.getters` que pide que `counterValue` esté ligado al captador `getCount`. Hemos elegido nombres diferentes para demostrar que se pueden utilizar nombres que tengan sentido en el contexto de tu componente, no necesariamente el nombre del captador en sí mismo.
-
-Tal vez te estés preguntando - por qué hemos elegido utilizar un captador en lugar de acceder directamente el valor del estado. Este concepto es más bien una mejor práctica, y es más aplicable a una aplicación grande, que presenta varias distintivas ventajas:
-
-1. Quizás nos interese definir obtenedores con valores computados (piensa en totales, promedios, etc.).
-2. Muchos de los componentes en una aplicación más grande pueden usar la misma función del captador.
-3. Si el valor se mueve de digamos `store.count` a `store.counter.value` tendrías que actualizar un captador en lugar de docenas de componentes.
-
-Estos son algunos de los beneficios de usar obtenedores.
-
-### Paso 5: Siguientes pasos
-
-Si ejecutas la aplicación ahora, comprobarás que se comporta como se espera.
-
-Para ampliar tu conocimiento de Vuex, puedes intentar implementar los siguientes cambios en la app, como un ejercicio.
-
-* Agregar un botón de decremento.
-* Instala [VueJS Devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=es) y juega con las herramientas Vuex y observa las mutaciones que están siendo aplicadas.
-* Añade una entrada de texto en otro componente llamado `IncrementAmount` e introduce la cantidad que hay que sumar. Esto puede ser un poco complicado ya que los formulario en Vuex funcionan de forma ligeramente diferente. Lea la sección [Form Handling](forms.md) para más detalles.

二进制
docs/es/tutorial/result.png


二进制
docs/es/tutorial/vuex_flow.png


二进制
docs/es/vuex.png


+ 0 - 1
docs/it/README.md

@@ -1 +0,0 @@
-SUMMARY.md

+ 0 - 18
docs/it/SUMMARY.md

@@ -1,18 +0,0 @@
-# Tabella dei Contenuti
-
-> Raccomandiamo di leggere il tutto secondo l'ordine stabilito.
-
-- [Che cosa è Vuex?](intro.md)
-- [Per iniziare](getting-started.md)
-- Concetti fondamentali
-  - [Stato e Getter](state.md)
-  - [Mutation](mutations.md)
-  - [Action](actions.md)
-- [Flusso dei Dati](data-flow.md)
-- [Struttura dell'Applicazione](structure.md)
-- [Middleware](middlewares.md)
-- [Modalità Strict](strict.md)
-- [Gestione dei Form](forms.md)
-- [Test del Codice](testing.md)
-- [Aggiornamento Automatico](hot-reload.md)
-- [Documentazione delle API](api.md)

+ 0 - 133
docs/it/actions.md

@@ -1,133 +0,0 @@
-# Actions
-
-> Le azioni, action, in Vuex sono i cosidetti "Actions creator" nel mondo di Flux. Ma questo termine è fuorviante.
-
-Le action sono semplici funzioni che inviano le mutation. Per convenzione, le action in Vuex si aspettano sempre un istanza di store come primo argomento, seguito da altri argomenti opzionali:
-
-``` js
-// l'action più semplice
-function increment (store) {
-  store.dispatch('INCREMENT')
-}
-
-// una semplice azione con più argomenti
-// che sfrutta il distruttore dei ES2015
-function incrementBy ({ dispatch }, amount) {
-  dispatch('INCREMENT', amount)
-}
-```
-
-La domanda può sorgere spontanea, perchè non inviamo direttamente le mutation senza passare per le azioni? Ricordate che **le mutation sono sempre sincrone**? Bene, tramite le action noi possiamo scavalcare questo problema in quanto, internamente ad una action, possiamo gestire codice asincrono!
-
-``` js
-function incrementAsync ({ dispatch }) {
-  setTimeout(() => {
-    dispatch('INCREMENT')
-  }, 1000)
-}
-```
-
-Un esempio pratico può essere il sistema di checkout di un carrello che richiede **chiamate asincrone ad API** e **l'invio di mutation multiple**:
-
-``` js
-function checkout ({ dispatch, state }, products) {
-  // salviamo l'oggetto corrente
-  const savedCartItems = [...state.cart.added]
-  // inviamo una richiesta di checkout
-  dispatch(types.CHECKOUT_REQUEST)
-  // in questo caso le API accettano due callback per success e failure
-  shop.buyProducts(
-    products,
-    // success
-    () => dispatch(types.CHECKOUT_SUCCESS),
-    // failure
-    () => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
-  )
-}
-```
-
-Si noti che invece di aspettarsi un valore di ritorno, la gestione delle API asincrone è fatta chiamando altre mutation. Possiamo quindi definire una regola di base dove **l'unico effetto prodotto dalla chiamata ad azioni è l'invio di mutation**.
-
-### Chiamare gli Action nei Componenti
-
-Forse avrete notato che le azioni, e le funzioni legate ad esse, non possono essere chiamate direttamente senza una referenza all'istanza dello store. Tecnicamente si potrebbe fare chiamando `action(this.$store)` internamente ad un metodo, è comunque consigliato esporre un set di API dal componente tramite `vuex.actions`, per esempio:
-
-``` js
-// internamente ad un componente
-import { incrementBy } from './actions'
-
-const vm = new Vue({
-  vuex: {
-    getters: { ... }, // i getter
-    actions: {
-      incrementBy // Utilizziamo la sintassi ES6 per gli oggetti
-    }
-  }
-})
-```
-
-Il codice appena visto lega l'azione `incrementBy` con l'istanza di uguale nome nello store ed espone tale istanza al componente tramite `vm.incrementBy`. Tutti gli argomenti passati ad `vm.incrementBy` saranno passai prima all'azione e poi allo store in questo modo:
-
-``` js
-vm.incrementBy(1)
-```
-
-è uguale a scrivere:
-
-``` js
-incrementBy(vm.$store, 1)
-```
-
-ma il beneficio di avere tale sintassi è che ora possiamo usare:
-
-``` html
-<button v-on:click="incrementBy(1)">Incrementa di uno</button>
-```
-
-Ovviamente potete utilizzare un altro nome dentro il componente, l'importante è referenziarlo all'istanza nello store:
-
-``` js
-// il componente
-import { incrementBy } from './actions'
-
-const vm = new Vue({
-  vuex: {
-    getters: { ... },
-    actions: {
-      plus: incrementBy // usiamo un altro nome
-    }
-  }
-})
-```
-
-Ora l'action sarà legata a `vm.plus` invece che `vm.incrementBy`.
-
-### Action Inline
-
-Se un'azione è specifica per un determinato componente, allora possiamo usare una scorciatoia e definirla inline:
-
-``` js
-const vm = new Vue({
-  vuex: {
-    getters: { ... },
-    actions: {
-      plus: ({ dispatch }) => dispatch('INCREMENT')
-    }
-  }
-})
-```
-
-### Legare tutte le Action
-
-Possiamo vincolare un componente ad avere tutte le action senza specificarne nessuna:
-
-``` js
-import * as actions from './actions'
-
-const vm = new Vue({
-  vuex: {
-    getters: { ... },
-    actions // il componente ora accede a tutte le action
-  }
-})
-```

+ 0 - 94
docs/it/api.md

@@ -1,94 +0,0 @@
-# Referenza alle API
-
-### Vuex.Store
-
-``` js
-import Vuex from 'vuex'
-
-const store = new Vuex.Store({ ...opzioni })
-```
-
-### Opzioni per il Costruttore
-
-- **state**
-
-  - tipo: `Oggetto`
-
-    Lo stato principale per lo store di Vuex.
-
-    [Dettagli](state.md)
-
-- **mutations**
-
-  - tipo: `Oggetto`
-
-    Un Oggetto che ha come chiavi i nomi delle mutation e come valore il nome della funzione (handler) della mutation stessa. L'handler ricevere sempre `state` come primo argomento.
-
-    [Dettagli](mutations.md)
-
-- **modules**
-
-  - tipo: `Oggetto`
-
-    Un  Oggetto contenente tutti i sub moduli che si uniranno allo store, di solito è formato tipo:
-
-    ``` js
-    {
-      key: {
-        state,
-        mutations
-      },
-      ...
-    }
-    ```
-
-    Ogni modulo può contenere uno stato `state` e delle `mutations`, molto simile al'opzione di root. Lo stato di un modulo sarà legato a quello principale dello store e sarà accessibile tramite il nome del modulo. Una mutation in un modulo riceverà solo lo stato del modulo stesso invece di quello principale (root state).
-
-- **middlewares**
-
-  - tipo: `Array<Oggetto>`
-
-    Un oggetto che contiene tutti i middleware del tipo:
-
-    ``` js
-    {
-      snapshot: Boolean, // predefinito: false
-      onInit: Funzione,
-      onMutation: Funzione
-    }
-    ```
-
-    Tutti i campi sono facoltativi. [Dettagli](middlewares.md)
-
-- **strict**
-
-  - tipo: `Boolean`
-  - predefinito: `false`
-
-    Forza Vuex ad avere lo store in modalità strict. In questa modalità tutte le mutazioni al di fuori del sistema di mutation di Vuex solleveranno un Errore.
-
-    [Dettagli](strict.md)
-
-### Proprietà di istanza di Vuex.Store
-
-- **state**
-
-  - tipo: `Oggetto`
-
-    Lo stato principale. In sola lettura.
-
-### Metodi di istanza di Vuex.Store
-
-- **dispatch(nomeMutazione: Stringa, ...argomenti)**
-
-  Directly dispatch a mutation. This is useful in certain situations are in general you should prefer using actions in application code.
-
-- **watch(pathOrGetter: Stringa|Funzione, cb: Funzione, [opzioni: Oggetto])**
-
-  Watch a path or a getter Funzione's value, and call the callback when the value changes. Accepts an optional opzioni Oggetto that takes the same opzioni as Vue's `vm.$watch` method.
-
-  To stop watching, call the returned handle Funzione.
-
-- **hotUpdate(opzioni: Oggetto)**
-
-  Hot swap new actions and mutations. [Dettagli](hot-reload.md)

+ 0 - 1
docs/it/book.json

@@ -1 +0,0 @@
-../book.json

+ 0 - 89
docs/it/data-flow.md

@@ -1,89 +0,0 @@
-# Flusso dei Dati
-
-Costruiamo un semplice contatore tramite Vuex per avere una visione migliore su come i dati siano scambiati tra i vari componenti. Si noti che questo esempio è un'estremizzazione per spiegare alcuni concetti chiavi, Vuex non è utile per questo tipo di applicazioni molto semplici.
-
-### Lo Store
-
-``` js
-// store.js
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-// Stato iniziale della nostra applicazione
-const state = {
-  count: 0
-}
-
-// Definiamo tutte le mutazioni
-const mutations = {
-  INCREMENT (state) {
-    state.count++
-  },
-  DECREMENT (state) {
-    state.count--
-  }
-}
-
-// creiamo lo store
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-### Action
-
-``` js
-// actions.js
-export const increment = ({ dispatch }) => dispatch('INCREMENT')
-export const decrement = ({ dispatch }) => dispatch('DECREMENT')
-```
-
-### Utilizziamo Vue
-
-**Il Template**
-
-``` html
-<div id="app">
-  Hai Cliccato: {{ count }} volte
-  <button v-on:click="increment">+</button>
-  <button v-on:click="decrement">-</button>
-</div>
-```
-
-**Lo Script**
-
-``` js
-// Stiamo importanto ed iniettando lo store perchè questo è il componente di root
-// In un'applicazione grossa questo procedimento viene fatto una sola volta
-import store from './store'
-import { increment, decrement } from './actions'
-
-const app = new Vue({
-  el: '#app',
-  store,
-  vuex: {
-    getters: {
-      count: state => state.count
-    },
-    actions: {
-      increment,
-      decrement
-    }
-  }
-})
-```
-
-Ecco fatto, questa applicazione è molto semplice e mostra come le action, mutazioni e lo store funzionino in modo tale da manipolare, anche se in questo caso molto banalmente, lo stato in base agli eventi che arrivano dal template, o utente.
-
-Noterete anche che il flusso dei dati è unidirezionale, come dovrebbe esserlo in Flux:
-
-1. L'utente sfrutta un componente per eseguire delle action;
-2. Le action avvitano le mutazioni che cambiano lo stato;
-3. Una volta che lo stato cambia una proprietà dello store, tale cambiamento viene riflesso ai componenti tramite i getter.
-
-<p align="center">
-  <img width="700px" src="vuex.png">
-</p>

+ 0 - 41
docs/it/forms.md

@@ -1,41 +0,0 @@
-# Gestione dei Form
-
-Quando si utilizza Vuex in modalità strict, può risultare difficile utilizzare `v-model` su uno stato che appartiene a Vuex:
-
-``` html
-<input v-model="obj.message">
-```
-
-Presupponendo che `obj` sia una proprietà derivata che restituisce un oggetto dallo store, avremmo una situazione dove `v-model` cerca di mutare direttamente `obj.message` quando l'utente modifica l'input. In modalità strict questo solleverebbe un errore a causa di una mutazione non avvenuta internamente ad una mutation di Vuex.
-
-Un modo per risolvere questo conflitto in Vuex è quello di legare l'`<input>` ad una chiamata che si riferisce ad un'azione. L'input si lega tramite `input` oppure l'evento `change`:
-
-``` html
-<input :value="message" @input="updateMessage">
-```
-``` js
-// ...
-vuex: {
-  getters: {
-    message: state => state.obj.message
-  },
-  actions: {
-    updateMessage: ({ dispatch }, e) => {
-      dispatch('UPDATE_MESSAGE', e.target.value)
-    }
-  }
-}
-```
-
-E ora scriviamo la mutation:
-
-``` js
-// ...
-mutations: {
-  UPDATE_MESSAGE (state, message) {
-    state.obj.message = message
-  }
-}
-```
-
-Questo approccio rende l'utilizzo di `v-model` leggermente più complesso ma è un trade-off necessario per rendere il vincolo tra l'input e lo stato tracciabile. Detto questo è giusto ricordare che Vuex non obbliga l'inserimento di tutti gli stati dentro ad uno store, se avete bisogno di tracciare degli stati che sono specifici di un solo componente è possibile farlo benissimo fuori dallo store di Vuex.

+ 0 - 54
docs/it/getting-started.md

@@ -1,54 +0,0 @@
-# Per Iniziare
-
-Al centro di qualsiasi applicazione che utilizza Vuex si trova lo **store**. Uno `store` è sostanzialmente un contenitore che contiene, per l'appunto, tutti gli **stati dell'applicazione**. Ci sono due cose che differenziano Vuex da un oggetto globale tipico di JavaScript:
-
-1. Lo store di Vuex è reattivo. Quando un componente preleva uno stato da store, quest'ultimo verrà aggiornato nel caso quello specifico stato venga cambiato.
-
-2. Non potete cambiare uno stato nello store in modo diretto. L'unico modo per effettuare un cambiamento è quello di inviare in modo esplicito una **mutations**. Questa filosofia rende più facile tracciare qualsiasi cambiamento di stato.
-
-### Lo Store più Semplice
-
-> **NOTA:** Nel corso della guida utilizzeremo la sintassi JavaScript che si riferisce a `ES2015` se ancora non siete al corrente degli aggiornamenti [aggiornatevi al riguardo](https://babeljs.io/docs/learn-es2015/)!
-Questa documentazione, insoltre, assume che voi siate al corrente con i concetti discussi nel capitolo: [Costruire un'Applicazione scalabile](http://it.vuejs.org/guide/application.html).
-
-Creare uno Store in Vuex è un processo abbastanza semplice, si inizia con lo stato iniziale e qualche mutations:
-
-``` js
-import Vuex from 'vuex'
-
-const state = {
-  count: 0
-}
-
-const mutations = {
-  INCREMENT (state) {
-    state.count++
-  }
-}
-
-const store = new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-Ora potrete accedere all'oggetto stato tramite `store.state` ed eventualmente attivare mutazioni, per esempio sul nome:
-
-``` js
-store.dispatch('INCREMENT')
-
-console.log(store.state.count) // -> 1
-```
-
-Se preferite l'approccio ad oggetti potete fare:
-
-``` js
-// stesso risultato
-store.dispatch({
-  type: 'INCREMENT'
-})
-```
-
-Di nuovo, il motivo per il quale stiamo effettuando il dispatch invece di cambiare lo stato tramite `store.state.count` è perchè vogliamo esplicitamente tenere traccia del cambiamento in se. Questa semplice convenzione rende le nostre intenzioni più esplicite, aiutando anche a capire perchè cambiamo lo stato in determinati punti del nostro codice. In aggiunta, questo ci permette di implementare strumenti per tenere traccia delle mutazioni, salvarne una copia o fare anche debugging trasversale.
-
-Ovviamente questo è un esempio molto semplice di come funziona Vuex e la centralizzazione degli stati. Più avanti discuteremo di alcuni concetti in dettaglio come: [Stati](state.md), [Mutazioni](mutations.md) ed [Azioni](actions.md).

+ 0 - 45
docs/it/hot-reload.md

@@ -1,45 +0,0 @@
-# Aggiornamento Automatico (Hot Reload)
-
-Vuex supporta l'aggiornamento automatico (Hot Reload o Aggiornamento a Caldo) per quanto riguarda i moduli, le mutation e gli action il tutto tramite WebPack [e le sue API](https://webpack.github.io/docs/hot-module-replacement.html).
-Ovviamente esiste anche l'alternativa tramite Browserify tramite il plugin [browserify-hmr](https://github.com/AgentME/browserify-hmr/).
-
-Per le mutation ed i moduli dovrete usare il metodo `store.hotUpdate()`:
-
-``` js
-// store.js
-import Vue from 'vue'
-import Vuex from 'vuex'
-import mutations from './mutations'
-import moduleA from './modules/a'
-
-Vue.use(Vuex)
-
-const state = { ... }
-
-const store = new Vuex.Store({
-  state,
-  mutations,
-  modules: {
-    a: moduleA
-  }
-})
-
-if (module.hot) {
-  // accetta le action o le mutation come moduli
-  module.hot.accept(['./mutations', './modules/a'], () => {
-    // richiede di aggiornare i moduli
-    // aggiungiamo .default tramite babel 6
-    const newMutations = require('./mutations').default
-    const newModuleA = require('./modules/a').default
-    // sostituiamo le nuove mutation ed i moduli nello store
-    store.hotUpdate({
-      mutations: newMutations,
-      modules: {
-        a: newModuleA
-      }
-    })
-  })
-}
-```
-
-Per quanto riguarda i getters non dovrete fare niente di specifico. I moduli di Webpack per l'hot reload vengono inseriti nella catena delle dipendenze che vanno ad analizzare i componenti di Vue per i getters, dato che i componenti vengono caricati via `vue-loader` essi sono automaticamente sotto "hot reload", questa catena è ricorsiva per ogni albero di componenti.

+ 0 - 13
docs/it/intro.md

@@ -1,13 +0,0 @@
-## Che cos'è Vuex?
-
-Vuex è un'archietettura per sviluppare applicazioni in Vue.js avendo un controllo dello stato centralizzato. Ispirato da [Flux](https://facebook.github.io/flux/) e [Redux](https://github.com/rackt/redux), ma con una implementazione di fondo più semplice ed intuitiva per lavorare all'unisono con Vue.js ed il suo sistema reattivo.
-
-## Perchè dovrei aver bisogno di tutto ciò?
-
-Se la vostra applicazione è abbastanza semplice, probabilmente non avete bisogno di un'architettura come Vuex. Non applicate concetti in modo prematuro se non servono. Nel caso stiate costruendo una SPA di medie/grosse dimensioni allora si, l'esigenza di Vuex si fa più viva per gestire i vostri componenti ed il loro stato.
-
-Quando si utilizza Vue.js, tendiamo a conservare lo stato internamente ai nostri componenti. Con questo processo ogni componente avrà un "pezzo di stato", dell'intera applicazione, al suo interno. Quando i componenti iniziano a comunicare tra di loro, essi dovranno anche condividere lo stato attuale che conservano al loro interno, il che può portare ad un incongruenza quando più componenti condividono la stessa informazione sullo stato dell'applicazione. Una pratica molto comune per ovviare a questo problema è implementare un sistema di eventi personalizzati che inviano gli stati ad ogni componente che lo richiede. Questa metodologia però porta a costruire eventi sempre più complessi all aumentare dei componenti e degli stati che si frammentano sempre di più.
-
-Per gestire meglio gli stati in un'applicazione che è in continua crescita bisogna iniziare a differenziare **gli stati locali dei componenti** da **gli stati globali dell'applicazione**. Gli stati dell'applicazione non appartengono a nessun componente, ma tutti i componenti possono averne bisogno (per esempio per monitorare gli aggiornamenti del DOM). Centralizzando gli stati in un unico luogo non abbiamo più bisogno di passare eventi in giro per tutti i componenti. In aggiunta questa centralizzazione ci permette di monitorare meglio qualsiasi mutazione l'applicazione subisce.
-
-Vuex inoltre fornisce degli strumenti per suddividere al meglio la logica degli stati in varie parti ma senza intaccare la flessibilità di avere tutto centralizzato.

+ 0 - 83
docs/it/middlewares.md

@@ -1,83 +0,0 @@
-# Middleware
-
-Lo store di Vuex accetta un'opzione detta `middlewares` che espone delle funzionalità per ogni mutation (si noti che non ha nulla a che vedere con i Middleware di Redux). Un Middleware in Vuex è un oggetto con al suo interno delle funzioni tipo:
-
-``` js
-const myMiddleware = {
-  onInit (state, store) {
-    // registra lo stato iniziale
-  },
-  onMutation (mutation, state, store) {
-    // chiamata ad ogni mutation
-    // l'argomento mutation viene fornito con { type, payload }
-  }
-}
-```
-
-un Middleware si può usare così:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  middlewares: [myMiddleware]
-})
-```
-
-Per definizione, il middleware riceve l'oggetto `state` ma può anche ricevere lo `store` in modo da chiamare delle mutation al suo interno. Dato che i Middleware sono usati principalmente per debugging **non possono mutare nessuno stato**.
-
-A volte un middleware potrebbe voler ricevere un'istantanea dello stato corrente in modo da poterla confrontare con l'eventuale stato post-mutation. Per fare ciò basta impostare l'ozione `snapshot: true`:
-
-``` js
-const myMiddlewareWithSnapshot = {
-  snapshot: true,
-  onMutation (mutation, nextState, prevState, store) {
-    // i due state, next e prev, sono snapshot dello state stesso
-    // prima e dopo la mutazione
-  }
-}
-```
-
-**I middleware che sfruttano gli snapshot andrebbero usati solo durante lo sviluppo**. Webpack, o Browserify, possono assicurarvi una pulizia di queste opzioni durante la build:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  middlewares: process.env.NODE_ENV !== 'production'
-    ? [myMiddlewareWithSnapshot]
-    : []
-})
-```
-
-In questo esempio viene usato il middleware se si è in ambiente di sviluppo. Per la build di produzione fate riferimento a [questo link](http://it.vuejs.org/guide/application.html#Distruibuzione-in-Produzione) che vi spiega come convertire `process.env.NODE_ENV !== 'production'` a `false` per la build finale.
-
-### Middleware Inclusi
-
-Vuex ha dei middleware per il debugging già inclusi:
-
-``` js
-import createLogger from 'vuex/logger'
-
-const store = new Vuex.Store({
-  middlewares: [createLogger()]
-})
-```
-
-Il middleware `createLogger` ha alcune opzioni interessanti:
-
-``` js
-const logger = createLogger({
-  collapsed: false, // auto espansione dei log delle mutation
-  transformer (state) {
-    // trasforma lo stato prima di loggare
-    // utile per esempio se si vuole speficiare quale subTree loggare
-    return state.subTree
-  },
-  mutationTransformer (mutation) {
-    // le mutation sono loggate nel formato { type, payload }
-    // ma possiamo specificare come formattarle a nostro piacimento
-    return mutation.type
-  }
-})
-```
-
-Si noti che il createLogger utilizza gli snapshot per gli stati, non usatelo in produzione.

+ 0 - 165
docs/it/mutations.md

@@ -1,165 +0,0 @@
-# Mutations
-
-In Vuex le mutations, o mutazioni, sono degli eventi essenziali: ogni mutazione ha un **nome** ed un **handler**. L'handler è la funzione che riceverà lo stato come primo argomento:
-
-``` js
-import Vuex from 'vuex'
-
-const store = new Vuex.Store({
-  state: {
-    count: 1
-  },
-  mutations: {
-    INCREMENT (state) {
-      // stato in fase di mutazione
-      state.count++
-    }
-  }
-})
-```
-
-Utilizzare il nome della mutations tutto in maiuscolo è solo una convenzione che aiuta a distinguere le mutations da funzioni normali.
-
-Non è possibile richiamare un handler direttamente. Bisogna registrarlo tramite il sistema di dispatch dello store: "Quando `INCREMENT` è in dispatch allora chiama questo handler", ecco un esempio pratico:
-
-``` js
-store.dispatch('INCREMENT')
-```
-
-### Dispatch con Argomenti
-
-E' possibile passare degli argomenti alla mutation:
-
-``` js
-// ...
-mutations: {
-  INCREMENT (state, n) {
-    state.count += n
-  }
-}
-```
-
-``` js
-store.dispatch('INCREMENT', 10)
-```
-
-In questo caso, `10` verrà passato al handler come secondo argomento. Nello specifico delle mutation questi argomenti vengono definiti **payload**.
-
-### Disptach tramite Oggetti
-
-> Richiede una versione >=0.6.2
-
-Si può eseguire il dispatch delle mutation tramite oggetti:
-
-``` js
-store.dispatch({
-  type: 'INCREMENT',
-  payload: 10
-})
-```
-
-Qundo si effettua questo tipo di dispatch, tramite oggetti, è buona norma includere tutti gli argomenti richiesti dalla mutation. Tutto l'oggetto verrà passato come secondo argomento all handler della mutation:
-
-``` js
-mutations: {
-  INCREMENT (state, mutation) {
-    state.count += mutation.payload
-  }
-}
-```
-
-### Disptach Silezioso
-
-> Richiede >=0.6.3
-
-In alcuni casi è possibile che vogliate un middleware che non ascolti il cambio di stato. Per esempio disptach multipli allo store in un breve periodo di tempo non è detto che sia necessario tracciarli tutti i cambiamenti. In questo caso è possibile effettuare un dispatch silezioso.
-
-*Nota:* Questo sistema andrebbe evitato dove possibile. Il sistema di dispatch silezioso impedisce il tracking degli stati da parte dei tool di sviluppo. Utilizzate questa tecnica se strettamente necessaria.
-
-Effettuare il dispatch silezioso è questione di inserire il flag `silent`.
-
-``` js
-/**
- * Esempio: Barra di progresso.
- **/
-export function start(store, options = {}) {
-  let timer = setInterval(() => {
-    store.dispatch({
-      type: INCREMENT,
-      silent: true,
-      payload: {
-        amount: 1,
-      },
-    });
-    if (store.state.progress === 100) {
-      clearInterval(timer);
-    }
-  }, 10);
-}
-```
-
-### Le Mutation Seguono le Regole di Vue sulla Reattività
-
-Dato che lo stato di Store in Vuex segue la filosofia "reattiva" di Vue, quando mutiamo uno stato, tutti i componenti che osservano tale stato riceveranno l'aggiornamento in modo automatico.
-Questo significa che anche le mutation hanno bisogno di qualche precauzione:
-
-1. E' preferibile inizializzare ogni stato all'interno dello store.
-
-2. Quando si aggiunge una proprietà ad un oggetto è consigliato:
-
-  - Utilizzare `Vue.set(obj, 'newProp', 123)`, o -
-
-  - Rimpiazzare l'oggetto corrente con uno nuovo che include la nuova proprietà. Per esempio utilizzando la `stage-2` della [sintassi di diffusione](https://github.com/sebmarkbage/ecmascript-rest-spread) possiamo scrivere una cosa del tipo:
-
-  ``` js
-  state.obj = { ...state.obj, newProp: 123 }
-  ```
-
-### Utilizzare delle Regole per i Nomi delle Mutation
-
-E' pratica comune utilizzare costanti per i nomi delle mutation, tale pratica favorisce il debug tramite strumenti come linter ed è poi possibile distinguere bene ogni mutation
-
-``` js
-// mutation-types.js
-export const SOME_MUTATION = 'SOME_MUTATION'
-```
-
-``` js
-// store.js
-import Vuex from 'vuex'
-import { SOME_MUTATION } from './mutation-types'
-
-const store = new Vuex.Store({
-  state: { ... },
-  actions: { ... },
-  mutations: {
-    // possiamo sfruttare la sintassi ES2015
-    // per utilizzare una costante come nome di una funzione!
-    [SOME_MUTATION] (state) {
-      // stato mutato
-    }
-  }
-})
-```
-
-L'utilizzo delle costanti è altamente consigliato soprattutto quando si divide in più moduli un'applicazione di larga scala. Tuttavia non c'è nessuna regola che vi obbliga ad utilizzare tale sintassi se non vi piace.
-
-### Le Mutation devono essere Sincrone
-
-Una regola importante da tenere a mente è che **gli handler delle mutation devono essere sincroni** Perchè? Considerate il seguente esempio:
-
-``` js
-mutations: {
-  SOME_MUTATION (state) {
-    api.callAsyncMethod(() => {
-      state.count++
-    })
-  }
-}
-```
-
-Ora immaginate di dover debuggare l'applicazione e guardate il log delle mutation. Per ogni log sarebbe utile avere un immagine dello stato **prima** e **dopo** la mutazione, purtroppo la chiamata asincrona non ci permette di farlo dato che non viene eseguita quando la mutazione viene chiamata. Non sappiamo quando la chiamata asincrona viene effettivamente chiamata.
-
-### Sulle Azioni
-
-Le mutazioni di stato combinate con eventi asincroni possono portare difficoltà nel capire che cosa succede in un determinato momento. Per esempio se chiamate due metodi, entrambi implementano internamente delle chiamate asincrone, come potete stabilire l'ordine di chiamata? Ecco perchè dev'essere chiaro il motivo per il quale qualsiasi tipo di operazione asincrona dev'essere fatto tramite le [Azioni](actions.md)

+ 0 - 159
docs/it/state.md

@@ -1,159 +0,0 @@
-# Stato e Getter
-
-### Albero a Stato Singolo
-
-Vuex utilizza un **albero a stato singolo** - questo singolo oggetto contiene tutti gli stati dell'applicazione e serve come "unica risorsa della verità". Vuex permette un solo store per applicazione. Un albero a stato singolo permette di localizzare specificatamente un singolo stato, modificarlo, salvarne una copia corrente ed effettuare debug e test.
-
-Questo principio non va in conflitto con il concetto di modularità, più avanti capiremo come distribuire lo stato in più moduli.
-
-### Sfruttare lo Stato nei Componenti di Vue
-
-Come visualizziamo lo stato internamente ad un componente Vue? Il modo più semplice è quello di sfruttare le [proprietà derivate](http://it.vuejs.org/guide/computed.html):
-
-``` js
-// internamente ad un Componente di Vue
-computed: {
-  count: function () {
-    return store.state.count
-  }
-}
-```
-
-Ogni volta che `store.state.count` cambia, verrà riflesso nella proprietà derivata e attiverà gli aggiornamenti del DOM necessari.
-
-Questo metodo, seppur semplice, può portare ad avere uno o più componenti che dipendono da un singleton globale, lo store, il quale può complicare la situazione in fase di test o se si vuole riutilizzare un componente in un'altra applicazione.
-Per evitare questo tipo di problemi, si può "iniettare" lo store internamente al componente, ecco come fare:
-
-1. Installato Vuex, collegate il componente principale (root) con lo store:
-
-  ``` js
-  import Vue from 'vue'
-  import Vuex from 'vuex'
-  import store from './store'
-  import MyComponent from './MyComponent'
-
-  // Questo passo è fondamentale in quando dice a vue
-  // Come comportarti con le opzioni relative a Vuex.
-  Vue.use(Vuex)
-
-  var app = new Vue({
-    el: '#app',
-    // Iniettiamo lo store direttamente nel componente
-    // Così facendo sarà disponibile a tutti i componenti figli
-    store,
-    components: {
-      MyComponent
-    }
-  })
-  ```
-
-  Iniettando lo store direttamente al componente principale, tutti i figli ne beneficeranno e lo store sarà disponibile tramite la proprietà `this.$store`. Comunque non è necessario utilizzare la referenza diretta:
-
-2. Internamente al componente figlio, possiamo sfruttare una funzione **getter** e farci restituire l'opzione `vuex.getters`:
-
-  ``` js
-  // MyComponent.js
-  export default {
-    template: '...',
-    data () { ... },
-    // Qui e dove lavoriamo con Vuex
-    vuex: {
-      getters: {
-        // Questo getter legherà `store.state.count` al componente tramite `this.count`
-        count: function (state) {
-          return state.count
-        }
-      }
-    }
-  }
-  ```
-
-  Si noti la sintassi speciale `vuex`. Al suo interno si specificano gli stati che il componente deve utilizzare dallo store. Per ogni proprietà dello store specificheremo un getter il quale riceve tutto l'albero degli stati dallo store
-  e seleziona solo lo stato che specifichiamo noi il valore verrà inserito in una properità del componente, proprio come una proprietà derivata.
-
-  In molti casi si può semplificare la sintassi del "getter" tramite ES2015:
-
-  ``` js
-  vuex: {
-    getters: {
-      count: state => state.count
-    }
-  }
-  ```
-
-### I Getter devono essere Puri
-
-Tutti i getter Vuex devono essere [delle funzioni pure](https://en.wikipedia.org/wiki/Pure_function) - esse devono prendere l'intero albero degli stati e restituire solo e soltanto un valore di tale stato. Questo rende il tutto più facile da modularizzare, testare e comporre. Significa anche che **non potrete usare `this` nei getter**.
-
-Se vi ritrovate nella situazione di dover usare `this`, per esempio per elaborare una properità derivata basata su uno stato locale del componente, allora dovrete definire un'altra proprietà derivata dedicata:
-
-``` js
-vuex: {
-  getters: {
-    currentId: state => state.currentId
-  }
-},
-computed: {
-  isCurrent () {
-    return this.id === this.currentId
-  }
-}
-```
-
-### I Getter possono restituire Stati Derivati
-
-Se consideriamo che i getter di Vuex dietro le quinte sono delle proprietà derivate, allora possiamo intuire che è possibile sfruttare alcune proprietà di quest'ultime per restituire uno stato più eleborato.
-Per esempio, si consideri che lo stato ha un array di `messaggi` contenente tutti i messaggi, ed un `currentThreadID` che rappresenta il thread corrente visualizzato dall utente.
-Ora, mettiamo caso di voler visualizzare tutti i messaggi che sono associati ad un Thread particolare:
-
-``` js
-vuex: {
-  getters: {
-    filteredMessages: state => {
-      return state.messages.filter(message => {
-        return message.threadID === state.currentThreadID
-      })
-    }
-  }
-}
-```
-
-Dato che le proprietà derivate di Vue.js sono messe in cache in modo automatico, non dovremo preoccuparci di chiamare questo metodo ad ogni mutazione dello stato!
-
-### Condividere dei Getter su più Componenti
-
-Come potete notare `filteredMessages` può essere utile in più componenti. In questo caso è buona idea esportare il metodo e condividerlo su più componenti:
-
-``` js
-// getters.js
-export function filteredMessages (state) {
-  return state.messages.filter(message => {
-    return message.threadID === state.currentThreadID
-  })
-}
-```
-
-``` js
-// In un componente..
-import { filteredMessages } from './getters'
-
-export default {
-  vuex: {
-    getters: {
-      filteredMessages
-    }
-  }
-}
-```
-
-Grazie al fatto che i Getter sono puri, tutti i getter possono essere condivisi tra i componenti e cachati in modo molto convenzionale: quando una dipendenza cambia viene rievalutata una sola volta per tutti i componenti!
-
-> Referenza a Flux: I getter di Vuex sono simili a [`mapStateToProps`](https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) in Redux. Comounque dato che ci si appoggia al sistema di proprietà derivate di Vue, c'è una netta differenza di prestazioni a favore di Vuex, troviamo più similitudini a [reselect](https://github.com/reactjs/reselect).
-
-### I Componenti Non Possono Mutare gli Stati
-
-E' importante ricordare che **i componenti non dovrebbero mai mutare uno stato in Vuex in modo diretto**. Ogni stato dev'essere mutato in modo esplicito e tracciabile, possibilmente sfruttando il sistema mutations di Vuex stesso.
-
-Per aiutare a rispettare questa regola, se in [Modalità Strict](strict.md), Vuex lancierà un errore se si prova a mutare uno stato in modo diretto.
-
-Con questa regola i vostri componenti in Vue avranno meno responsabilità: essi sono legati allo Store di Vuex in modalità sola lettura tramite i getter, l'unico modo per cambiare lo stato in qualsiasi modo è attivando le **mutations** (ne parleremo dopo). Il vantaggio è che i componenti potranno continuare ad operare sui loro stati locali se necessario ma senza doversi preoccupare di gestire la logica per gli stati globali dell'applicazione dato che, quest'ultimi, sono centralizzati internamente in Vuex.

+ 0 - 25
docs/it/strict.md

@@ -1,25 +0,0 @@
-# Modalità Strict
-
-Per Abilitare la modalità strict basta passare `strict: true` quando si crea uno Store in Vuex:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  strict: true
-})
-```
-
-Quando si è in modalità strict, ogni volta che Vuex viene mutato al di fuori delle mutation un errore viene lanciato. Questa logica assicura che tutti gli stati siano tracciabili dal sistema di debug.
-
-### Sviluppo vs Produzione
-
-**Non abilitate la modalità strict quando pubblicate il progetto in produzione** La modalità strict esegue una scansione approfondita di ogni mutation per capire i cambiamenti effettuati sugli stati dello store - in produzione questo porterebbe a dei problemi di prestazioni.
-
-Come sui middleware anche qui possiamo automatizzare il processo di abilitazione/disabilitazione tramite gli strumenti di build:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  strict: process.env.NODE_ENV !== 'production'
-})
-```

+ 0 - 136
docs/it/structure.md

@@ -1,136 +0,0 @@
-# Struttura dell'Applicazione
-
-Vuex non ti obbliga a seguire nessuna convenzione per quanto riguarda la struttura del codice però ci sono dei principi che possono essere utili e vale la pena tenere in considerazione:
-
-1. Lo stato dell'Applicazione è conservato in uno store, il quale è un singolo oggetto.
-
-2. L'unico modo di mutare lo stato è quello di inviare una mutation allo store.
-
-3. Le mutation sono sincrone, l'unico effetto che devono avere è quello di mutare uno stato.
-
-4. Possiamo esporre uno strato più complesso di API tramite le action. Le action possono incapsulare mutation e codice asincrono ma il fine ultimo di una action dev'essere sempre quello che attivare una mutation.
-
-5. I Componenti usano i getter per prelevare gli stati dallo store e chiamano le azioni per mutarli.
-
-La cosa interessante delle mutation, action e getter in Vuex è il fatto che **sono tutte funzioni javascript**. Se seguirete queste piccole regolette sarà più facile interscambiare la logica tra progetti che utilizzano VuexT. Di seguito sono mostrate delle strutture di base per i vostri progetti in Vuex.
-
-### Progetto Semplice
-
-Quando si parla di applicazioni semplici possiamo definire **store** e **actions** in due file separati:
-
-``` bash
-.
-├── index.html
-├── main.js
-├── components
-│   ├── App.vue
-│   └── ...
-└── vuex
-    ├── store.js     # file per lo store
-    └── actions.js   # file per le action
-```
-
-Per un esempio pratico potete rivedere [L'esempio del Contatore](https://github.com/vuejs/vuex/tree/master/examples/counter) oppureß [L'esempio TodoMVC](https://github.com/vuejs/vuex/tree/master/examples/todomvc).
-
-Alternativamente potete anche suddividere le mutation in un file a se stante.
-
-### Medium to Large Project
-
-Per tutte quelle applicazioni di medie o grosse dimensioni la struttura di Vuex può differire rispetto a quella vista precedentemente. Per esempio la suddivisione del codice in moduli atomici per ogni vario stato da monitorare (molto simile alla logica degli store in Flux o ai reducers in Redux), ognuno dei quali si occupa di uno specifico dominio nella vostra applicazione ecco un esempio di struttura:
-
-``` bash
-├── index.html
-├── main.js
-├── api
-│   └── ... # api request
-├── components
-│   ├── App.vue
-│   └── ...
-└── vuex
-    ├── actions.js        # Tutte le azioni
-    ├── store.js          # Qui assembliamo i moduli
-    ├── mutation-types.js # costanti globali
-    └── modules
-        ├── cart.js       # lo stato e le mutation per il carrello
-        └── products.js   # lo stato e le mutation per i prodotti
-```
-
-Un modulo, di solito, assomiglia a qualcosa del tipo:
-
-``` js
-// vuex/modules/products.js
-import {
-  RECEIVE_PRODUCTS,
-  ADD_TO_CART
-} from '../mutation-types'
-
-// stato iniziale
-const state = {
-  all: []
-}
-
-// mutations
-const mutations = {
-  [RECEIVE_PRODUCTS] (state, products) {
-    state.all = products
-  },
-
-  [ADD_TO_CART] (state, productId) {
-    state.all.find(p => p.id === productId).inventory--
-  }
-}
-
-export default {
-  state,
-  mutations
-}
-```
-
-Ed in vuex/store.js, possiamo assemblare tutti i moduli:
-
-``` js
-// vuex/store.js
-import Vue from 'vue'
-import Vuex from '../../../src'
-// importiamo i moduli
-import cart from './modules/cart'
-import products from './modules/products'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  // combiniamoli
-  modules: {
-    cart,
-    products
-  }
-})
-```
-
-Lo stato iniziale di `cart` verrà legato alla root dell'albero degli stati in modo tale da ottenere `store.state.cart`. In aggiunta **tutte le mutation sono definite in un sub modulo e ricevono solo lo stato associato a tale sub modulo**. Questo significa che il modulo `cart` riceverà sempre `store.state.cart` come primo argomento.
-
-L'albero degli stati, e la sua root, non possono essere rimpiazzati all'interno dei moduli. Per esempio questo codice non funzionerà:
-
-``` js
-const mutations = {
-  SOME_MUTATION (state) {
-    state = { ... }
-  }
-}
-```
-
-Invece questo codice contiene la logica giusta per gestire gli alberi di ogni sub modulo:
-
-``` js
-const mutations = {
-  SOME_MUTATION (state) {
-    state.value = { ... }
-  }
-}
-```
-
-Dato che tutti i moduli esportano semplici funzioni ed oggetti javascript essi sono facili da testare e mantenere ma, soprattutto, possono essere aggiornati tramite "hot-reload". Ovviamente la guida descritta sopra è solo un indicazione di come dovrebbe essere strutturata un'applicazione tramite Vuex. Potete usare qualsiasi struttura voi riteniate adeguata.
-
-Si noti che non ci sono action nei moduli, questo perchè una singola azione può attivare differenti mutation in differenti moduli. E' sempre una buona idea separare le action dall'implementazione dei moduli.
-
-Per un esempio concreto potete rivedere [il Carrello della Spesa in Vuex](https://github.com/vuejs/vuex/tree/master/examples/shopping-cart).

+ 0 - 166
docs/it/testing.md

@@ -1,166 +0,0 @@
-# Test del Codice
-
-La prima cosa da testare in un'applicazione che sfrutta Vuex sono le mutation e le action.
-
-### Testare le Mutation
-
-Per testare le mutation non abbiamo bisogno di nessun tipo di sistema specifico dato che esse si basano solo sugli argomenti che gli vengono passati. Se state utilizzando i moduli ES2015 potete mettere le vostre mutation nel file `store.js`, e potete esportarle come qualsiasi altro modulo:
-
-``` js
-const state = { ... }
-
-// esportiamo le mutation
-export const mutations = { ... }
-
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-Testiamo una mutation sfruttando Mocha e Chai (potete usare qualsiasi framework voi troviate comodo):
-
-``` js
-// mutations.js
-export const INCREMENT = state => state.count++
-```
-
-``` js
-// mutations.spec.js
-import { expect } from 'chai'
-import { mutations } from './store'
-
-// creiamo la struttura
-const { INCREMENT } = mutations
-
-describe('mutations', () => {
-  it('INCREMENT', () => {
-    // facciamo un mock dello stato
-    const state = { count: 0 }
-    // applichiamo la mutation
-    INCREMENT(state)
-    // confrontiamo i risultati
-    expect(state.count).to.equal(1)
-  })
-})
-```
-
-### Testare le Action
-
-Le Action possono essere più complesse da testate dato che possono contenere chiamate ad API esterne a Vuex. Quando si testano le action, si dovrà fare uso, nella maggior parte dei casi, di un sistema di mocking - per esempio nel caso volessimo chiamare delle API ad un servizio di terze parti.
-Per effettuare il mocking delle dipendenze, si può utilizzare il comodo sistema di [inject-loader](https://github.com/plasticine/inject-loader) assieme a WebPack.
-
-Esempio su una Action asincrona:
-
-``` js
-// actions.js
-import shop from '../api/shop'
-
-export const getAllProducts = ({ dispatch }) => {
-  dispatch('REQUEST_PRODUCTS')
-  shop.getProducts(products => {
-    dispatch('RECEIVE_PRODUCTS', products)
-  })
-}
-```
-
-``` js
-// actions.spec.js
-
-// utilizziamo la sintassi require per i loader inline
-// tramte inject-loader, ci restituisce un model
-// che ci permette di fare mocking
-import { expect } from 'chai'
-const actionsInjector = require('inject!./actions')
-
-// creiamo il modulo tramite mock
-const actions = actionsInjector({
-  '../api/shop': {
-    getProducts (cb) {
-      setTimeout(() => {
-        cb([ /* response dal mock */ ])
-      }, 100)
-    }
-  }
-})
-
-// testiamo le azioni con i risultati desiderati
-const testAction = (action, args, state, expectedMutations, done) => {
-  let count = 0
-  const dispatch = (name, ...payload) => {
-    const mutation = expectedMutations[count]
-    expect(mutation.name).to.equal(name)
-    if (payload) {
-      expect(mutation.payload).to.deep.equal(payload)
-    }
-    count++
-    if (count >= expectedMutations.length) {
-      done()
-    }
-  }
-  action({dispatch, state}, ...args)
-
-  if (expectedMutations.length === 0) {
-    expect(count).to.equal(0)
-    done()
-  }
-}
-
-describe('actions', () => {
-  it('getAllProducts', done => {
-    testAction(actions.getAllProducts, [], {}, [
-      { name: 'REQUEST_PRODUCTS' },
-      { name: 'RECEIVE_PRODUCTS', payload: [ /* mocked response */ ] }
-    ], done)
-  })
-})
-```
-
-### Eseguire i tests
-
-Se le tue mutation o action sono scritte in modo consono, i test non dovrebbero soffrire dipendeze esterne, come il browser e le sue API, anche durante l'uso di Mock. Detto questo potenzialmente è possibile pacchettizare i test tramite WebPack e farli girare sotto Node direttamente. Alternativamente è possibile utilizzare un sistema come `mocha-loader` o Karma assieme a `karma-webpack` per far girare i test in un browser reale.
-
-#### Girare sotto Node
-
-Ecco una config webpack per testare tramite Node:
-
-``` js
-module.exports = {
-  entry: './test.js',
-  output: {
-    path: __dirname,
-    filename: 'test-bundle.js'
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        loader: 'babel',
-        exclude: /node_modules/
-      }
-    ]
-  },
-  babel: {
-    presets: ['es2015']
-  }
-}
-```
-
-Successivamente:
-
-``` bash
-webpack
-mocha test-bundle.js
-```
-
-#### Testare nel Browser
-
-1. Installare `mocha-loader`
-2. Cambiare l'`entry` dalla configurazione Webpack sopra citata in `'mocha!babel!./test.js'`.
-3. Inizializzare `webpack-dev-server` utilizzando la configurazione sopra citata
-4. Andare su `localhost:8080/webpack-dev-server/test-bundle`.
-5. Profit!
-
-#### Testare nel Browser tramite Karma e karma-webpack
-
-Per una guida più dettagliata su Karma consultare la [documentazione di vue-loader](http://vuejs.github.io/vue-loader/workflow/testing.html).

二进制
docs/it/vuex.png


+ 0 - 1
docs/ja/README.md

@@ -1 +0,0 @@
-SUMMARY.md

+ 0 - 17
docs/ja/SUMMARY.md

@@ -1,17 +0,0 @@
-# Table of Contents
-
-> Note: The Japanese docs are currently for 0.2.x only. For the latest version please see the English docs instead.
-
-- [Vuex は何ですか?](intro.md)
-- [中核概念](concepts.md)
-  - [ステート](state.md)
-  - [ミューテーション](mutations.md)
-  - [アクション](actions.md)
-- [データフロー](data-flow.md)
-- [アプリケーションの構造](structure.md)
-- [ミドルウェア](middlewares.md)
-- [厳格モード](strict.md)
-- [フォームのハンドリング](forms.md)
-- [テスト](testing.md)
-- [ホットリローディング](hot-reload.md)
-- [API リファレンス](api.md)

+ 0 - 137
docs/ja/actions.md

@@ -1,137 +0,0 @@
-# アクション
-
-アクションはミューテーションをディスパッチする機能です。アクションは非同期にすることができ、単一アクションは複数のミューテーションをディスパッチできます。
-
-アクションは何かが起こるための意向を表しており、それを呼び出すコンポーネントから離れて詳細を抽象化します。コンポーネントが何かしたい場合アクション呼び出します。アクションはステート変化をもたらすため、コールバックまたは戻り値について心配する必要はなく、そしてステート変化は更新するコンポーネントの DOM をトリガします。コンポーネントは、アクションが実際に行われている方法から、完全に切り離されます。
-
-それゆえ、通常アクション内部のデータエンドポイントへの API 呼び出しを行い、そしてアクションを呼び出すコンポーネントの両方から非同期に詳細を隠し、さらにミューテーションはアクションによってトリガされます。
-
-> Vuex のアクションは純粋な Flux の定義では実際には "アクションクリエータ (action creators)" ですが、私はその用語は便利よりも混乱していると見ています。
-
-### 単純なアクション
-
-アクションは単純に単一のミューテーションをトリガするのが一般的です。Vuex はそのようなアクションの定義するために省略記法を提供します:
-
-``` js
-const store = new Vuex.Store({
-  state: {
-    count: 1
-  },
-  mutations: {
-    INCREMENT (state, x) {
-      state.count += x
-    }
-  },
-  actions: {
-    // 省略記法
-    // ミューテーション名を提供する
-    increment: 'INCREMENT'
-  }
-})
-```
-
-今、アクションを呼び出すとき:
-
-``` js
-store.actions.increment(1)
-```
-
-単純に私たちに対して以下を呼び出します:
-
-``` js
-store.dispatch('INCREMENT', 1)
-```
-
-アクションに渡される任意の引数は、ミューテーションハンドラに渡されることに注意してください。
-
-### 標準なアクション
-
-現在のステートに依存しているロジック、または非同期な操作を必要とするアクションについては、それらを関数として定義します。アクション関数は常に第1引数として呼び出す store を取得します:
-
-``` js
-const vuex = new Vuex({
-  state: {
-    count: 1
-  },
-  mutations: {
-    INCREMENT (state, x) {
-      state += x
-    }
-  },
-  actions: {
-    incrementIfOdd: (store, x) => {
-      if ((store.state.count + 1) % 2 === 0) {
-        store.dispatch('INCREMENT', x)
-      }
-    }
-  }
-})
-```
-
-
-関数本体それほど冗長にしない ES6 の argument destructuring を使用するのが一般的です(ここでは、`dispatch` 関数は store インスタンスに事前にバインドされているように、それをメソッドとして呼び出す必要はありません):
-
-``` js
-// ...
-actions: {
-  incrementIfOdd: ({ dispatch, state }, x) => {
-    if ((state.count + 1) % 2 === 0) {
-      dispatch('INCREMENT', x)
-    }
-  }
-}
-```
-
-以下のように、文字列省略記法は基本的に糖衣構文 (syntax sugar) です:
-
-``` js
-actions: {
-  increment: 'INCREMENT'
-}
-// 以下に相当 ... :
-actions: {
-  increment: ({ dispatch }, ...payload) => {
-    dispatch('INCREMENT', ...payload)
-  }
-}
-```
-
-### 非同期なアクション
-
-非同期なアクションの定義に対して同じ構文を使用することができます:
-
-``` js
-// ...
-actions: {
-  incrementAsync: ({ dispatch }, x) => {
-    setTimeout(() => {
-      dispatch('INCREMENT', x)
-    }, 1000)
-  }
-}
-```
-
-より実践的な例はショッピングカートをチェックアウトする場合です。複数のミューテーションをトリガする必要がある場合があります。チェックアウトを開始されたとき、成功、そして失敗の例を示します:
-
-``` js
-// ...
-actions: {
-  checkout: ({ dispatch, state }, products) => {
-    // カートアイテムで現在のアイテムを保存する
-    const savedCartItems = [...state.cart.added]
-    // チェックアウトリクエストを送り出し、
-    // 楽観的にカートをクリアします
-    dispatch(types.CHECKOUT_REQUEST)
-    // shop API は成功コールバックと失敗コールバックを受け入れます
-    shop.buyProducts(
-      products,
-      // 成功処理
-      () => dispatch(types.CHECKOUT_SUCCESS),
-      // 失敗処理
-      () => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
-    )
-  }
-}
-```
-
-また、全てのコンポーネントは全体のチェックアウトを行うために `store.actions.checkout(products)` を呼び出す必要があります。

+ 0 - 93
docs/ja/api.md

@@ -1,93 +0,0 @@
-# API リファレンス
-
-### Vuex.Store
-
-``` js
-import Vuex from 'vuex'
-
-const store = new Vuex.Store({ ...options })
-```
-
-### Vuex.Store コンストラクタオプション
-
-- **state**
-  
-  - 型: `Object`
-
-    Vuex store 向けの root なステートオブジェクト
-
-    [詳細](state.md)
-
-- **mutations**
-
-  - 型: `Object | Array<Object>`
-
-    各エントリキーがミューテーション名とその値がミューテーションハンドラ関数である値であるオブジェクト。ハンドラ関数は常に第1引数として`state` を受信し、そして次のディスパッチ呼び出しに渡される全ての引数を受信する
-
-    オブジェクトの配列を渡す場合は、これらオブジェクトは自動的に最後のオブジェクトにいっしょにマージされる
-
-    [詳細](mutations.md)
-
-- **actions**
-
-  - 型: `Object | Array<Object>`
-
-    各エントリキーがアクション名とその値のいずれかであるオブジェクト
-
-    1. ミューテーション名の文字列。または、
-    2. 第1引数として store を受信する関数、第2引数以降は追加されたペイロード引数
-
-    Vuex はこれらエントリを処理し、そして実際に呼び出し可能なアクション関数を作成し、さらに store の `actions` プロパティを公開する
-
-    オブジェクトの配列を渡す場合は、これらオブジェクトは自動的に最後のオブジェクトにいっしょにマージされる
-
-    [詳細](actions.md)
-
-- **middlewares**
-
-  - 型: `Array<Object>`
-
-    ミドルウェアオブジェクトの配列で以下のような形式であること:
-
-    ``` js
-    {
-      snapshot: Boolean, // default: false
-      onInit: Function,
-      onMutation: Function
-    }
-    ```
-
-    全てのフィールドは任意 [詳細](middlewares.md)
-
-- **strict**
-
-  - 型: `Boolean`
-  - デフォルト値: `false`
-
-    Vuex store を 厳格モードに強制する。厳格モードではミューテーションハンドラの外側の Vuex ステートに任意に変異するとき、エラーを投げる
-
-    [詳細](strict.md)
-
-### Vuex.Store インスタンスプロパティ
-
-- **state**
-
-  - 型: `Object`
-
-    root なステート。読み取り専用
-
-- **actions**
-
-  - 型: `Object`
-
-    呼び出し可能なアクション関数
-
-### Vuex.Store インスタンスメソッド
-
-- **dispatch(mutationName: String, ...args)**
-
-  直接ミューテーションをディスパッチする。これは一般的には、アプリケーションコードでアクションを使用するほうが必要な場合のような、特定の状況で有用
-
-- **hotUpdate(newOptions: Object)**
-
-  ホットスワップな新しいアクションとミューテーション [詳細](hot-reload.md)

+ 0 - 1
docs/ja/book.json

@@ -1 +0,0 @@
-../book.json

+ 0 - 31
docs/ja/concepts.md

@@ -1,31 +0,0 @@
-# 中核概念
-
-Vuex Store を作成するために `Vuex.Store` コンストラクタを使用できます。ほとんどの場合、各アプリケーション毎に単独の store だけが必要になります。各 Vuex Store は 3 種類の "構成要素" からなります:
-
-- **ステート**: アプリケーション状態を表すプレーンなオブジェクト
-
-- **ミューテーション**: 状態を変異させる関数。ミューテーションは**同期**必須
-
-- **アクション**: ミューテーションをディスパッチする関数。アクションは非同期操作を含めることができ、複数のミューテーションをディスパッチすることができます
-
-どうして、状態を操作する単純な機能よりもむしろ、*ミューテーション*と*アクション*を区別したいのでしょうか?その理由は、**ミューテーションを分離したいのと非同期**のためです。多くの複雑なアプリケーションは 2 つの組合せから成り立ちます。分離すると、それら両方を調査することが容易になり、そしてそれらのためのテストを書くこともできます。
-
-> Flux について精通している場合、ここでの用語/概念の違いがあることに注意してください。Vuex のアクションは Flux の**アクションクリエータ (action creators)** と同等でありますが、Vuex のミューテーションは Flux の **アクション (actions)** に相当します。
-
-### Vuex Store の作成
-
-> **NOTE:** 残りのドキュメント向けのコード例に対して ES2015 シンタックスを使用します。それについて理解できない場合は、[ここで](https://babeljs.io/docs/learn-es2015/)で学習してください!ドキュメントは既に[大規模アプリケーションの構築](http://vuejs.org/guide/application.html)で説明した概念にに精通している前提としています。
-
-Vuex Store を作成することは非常に簡単です。上記の構成要素を一緒に入れると下記になります:
-
-``` js
-import Vuex from 'vuex'
-
-const store = new Vuex.Store({
-  state: { ... },
-  actions: { ... },
-  mutations: { ... }
-})
-```
-
-一度作成すると、ステートは `store.state` 経由、アクションは `store.actions` 経由でアクセスすることができます。ミューテーション関数は直接アクセスすることはできません。ミューテーション関数は、アクションによるトリガされた時だけ、もしくは `store.dispatch()` を呼び出すときにアクセスできます。次の詳細で各概念について説明します。

+ 0 - 92
docs/ja/data-flow.md

@@ -1,92 +0,0 @@
-# データフロー
-
-Vuex アプリケーション内部のデータフローをより理解を得るために、Vuex で単純にカウンタするアプリケーションを構築してみましょう。これは概念を説明する目的のための簡単な例であることに注意してください。実際には、このような単純なタスクのために Vuex は必要ありません。
-
-### セットアップ
-
-``` js
-// store.js
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-```
-
-### アプリケーションのステートを定義
-
-``` js
-const state = {
-  count: 0
-}
-```
-
-### ステート可能なミューテーションを定義
-
-``` js
-const mutations = {
-  INCREMENT (state) {
-    state.count++
-  },
-  DECREMENT (state) {
-    state.count--
-  }
-}
-```
-
-### 呼び出し可能なアクションを定義
-
-``` js
-const actions = {
-  increment: 'INCREMENT',
-  decrement: 'DECREMENT'
-}
-```
-
-### Vuex Store を作成
-
-``` js
-export default new Vuex.Store({
-  state,
-  mutations,
-  actions
-})
-```
-
-### Vue コンポーネントでの使用
-
-**テンプレート**
-
-``` html
-<div>
-  Clicked: {{ count }} times
-  <button v-on:click="increment">+</button>
-  <button v-on:click="decrement">-</button>
-</div>
-```
-
-**スクリプト**
-
-``` js
-import store from './store.js'
-
-export default {
-  computed: {
-    // 算出プロパティ(computed property) を使用してステートにバインド
-    count () {
-      return store.state.count
-    }
-  },
-  methods: {
-    increment: store.actions.increment,
-    decrement: store.actions.decrement
-  }
-}
-```
-
-ここでは、コンポーネントが非常に単純であることに注意しましょう。それは単に Vuex store からいくつかのステートを表示し(データそれ自身でさえ所有しません)、そしてユーザー入力イベントでいくつかの store のアクションを呼び出します。
-
-Flux であるような、データの流れが一方向であることに注意しましょう:
-
-<p align="center">
-  <img width="700px" src="vuex.png">
-</p>

+ 0 - 36
docs/ja/forms.md

@@ -1,36 +0,0 @@
-# フォームのハンドリング
-
-厳格モードで Vuex を使用するとき、Vuex に属するステートの一部において `v-model` を使用するためには少しトリッキーです:
-
-``` html
-<input v-model="obj.message">
-```
-
-`obj` が store からオブジェクトを返す算出プロパティ (computed property) と仮定すると、`v-model` はここでは、input でユーザーがタイプするとき、直接 `obj.message` を変異させようとします。厳格モードにおいて、ミューテーションは明示的に Vuex のミューテーションハンドラ内部で処理されていないため、エラーを投げます。
-
-それに対処するための "Vuex way" は、`<input>` の値をバインディングし、そして `input` または `change` イベントでアクションを呼び出します:
-
-``` html
-<input :value="obj.message" @input="updateMessage">
-```
-``` js
-// ...
-methods: {
-  updateMessage: function (e) {
-    store.actions.updateMessage(e.target.value)
-  }
-}
-```
-
-`updateMessage` アクションが単に `'UPDATE_MESSAGE'` をディスパッチすると仮定すると、ここではミューテーションハンドラは以下のようになります:
-
-``` js
-// ...
-mutations: {
-  UPDATE_MESSAGE (state, message) {
-    state.obj.message = message
-  }
-}
-```
-
-確かに、これはかなりシンプルな `v-model` よりも冗長ですが、これは、明示的で追跡可能なステートの変化させるためのコストです。同時に、Vuex は Vuex store 内部の全てのステートを置く必要がないということに注意してください。フォームのインタラクションの全てにおいて、ミューテーションの追跡を望まない場合は、単純にコンポーネントのローカルステートとして Vuex の外部にフォームのステートを保つことができ、これは自由に `v-model` を活用することができます。

+ 0 - 29
docs/ja/hot-reload.md

@@ -1,29 +0,0 @@
-# ホットリローディング
-
-Vuex は開発においてホットリローディングなアクションとミューテーションをサポートします。Webpack は [Hot Module Replacement API](https://webpack.github.io/docs/hot-module-replacement.html) を使用します。Browserify においても [browserify-hmr](https://github.com/AgentME/browserify-hmr/) プラグインによって使用することができます。
-
-新しいアクションとミューテーションによって `store.hotUpdate()` として呼び出すのと同じくらい簡単です:
-
-``` js
-// ...
-const store = new Vuex.Store({
-  state,
-  actions,
-  mutations
-})
-
-if (module.hot) {
-  // ホットモジュールとしてアクションとモジュールを受け付ける
-  module.hot.accept(['./actions', './mutations'], () => {
-    // 更新されたモジュールをインポートする
-    // babel 6 モジュール出力のため、ここでは .default を追加しなければならない
-    const newActions = require('./actions').default
-    const newMutations = require('./mutations').default
-    // 新しいアクションとミューテーションにスワップ
-    store.hotUpdate({
-      actions: newActions,
-      mutations: newMutations
-    })
-  })
-}
-```

+ 0 - 13
docs/ja/intro.md

@@ -1,13 +0,0 @@
-## Vuex は何ですか?
-
-Vuex は Vue.js アプリケーションで集中状態管理するためのアプリケーションアーキテクチャです。[Flux](https://facebook.github.io/flux/) や [Redux](https://github.com/rackt/redux) からインスピレーションを得ていますが、 簡易化された概念、そして Vue.js リアクティブシステムの長所を得るために、特別に設計された実装になっています。
-
-## なぜこれを必要とするのですか?
-
-あなたのアプリケーションが非常に単純であるならば、多分 Vuex は必要ないでしょう。それを早まって適用しないでください。しかし、中〜大規模な SPA を構築する場合は、あなたの Vue コンポーネントの外側でどうやってよりよい構造物にするかについて考える状況に遭遇する機会です。これは Vuex の出番です。
-
-Vue.js を単独て使用するとき、しばしば、私達のコンポーネントの"内部"状態を保持します。つまり、各コンポーネントは、私達のアプリケーション状態の一部を所有しており、結果として状態があらゆる場所に散在しています。しかしながら、時どき状態の一部は、複数のコンポーネントにより共有される必要があります。一般的に見られる経験として、あるコンポーネントがいくつかの状態を他のコンポーネントにカスタムイベントシステムを使用して"送ろう"とします。このパターンの問題は、大規模なコンポーネントツリー内部のイベントフローはすぐに複雑にでき、しばしばうまく動作しない場合はそれについて原因を調査するのは難しいです。
-
-大規模アプリケーションで状態を共有させるために優れた対処として、**コンポーネントのローカル状態**と**アプリケーションレベルの状態**を区別する必要があります。アプリケーション状態は特定のコンポーネントに属していませんが、私達のコンポーネントはリアクティブな DOM 更新のためにそれを監視できます。1 つの場所でそれを集中的に管理することによって、あるコンポーネントがそこに属する必要よりも全てに影響を与えるため、もはやイベントあちこちを渡す必要はありません。加えて、私達は、記録と状態変化の理解を容易にするための全ての変異を検査することができ、タイムトラベルデバッグのような派手なものも実装可能です。
-
-Vuex はまた、どのように異なる場所に状態管理ロジックを分離するか、いくつか意見を強制しますが、それでも実際のコード構造に対して十分な柔軟性を可能します。

+ 0 - 81
docs/ja/middlewares.md

@@ -1,81 +0,0 @@
-# ミドルウェア
-
-Vuex store は各ミューテーション(これは Redux のミドルウェアとは全く無関係であることに注意してください)に対して公開された hook を `middlewares` オプションとして受け入れます。Vuex のミドルウェアは単純にいくつかの hook 関数を実装したオブジェクトです:
-
-``` js
-const myMiddleware = {
-  onInit (state) {
-    // 初期ステートを記録
-  },
-  onMutation (mutation, state) {
-    // 全ての変異後に呼ばれる
-    // ミューテーションは { type, payload } の形式で来る
-  }
-}
-```
-
-そして、このように使用することができます:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  middlewares: [myMiddleware]
-})
-```
-
-デフォルトでは、ミドルウェアは実際 `state` オブジェクトを受信します。ミドルウェアは主にデバッギング目的やデータの永続化のために使用されるため、ミドルウェアでは、**ステートを変異することができません**。
-
-時どき、ミドルウェアはステートの"スナップショット"を受信することができ、また事前のミューテーションの状態と事後のミューテーションの状態を比較したいかもしれません。このようなミドルウェアは `snapshot: true` オプションを宣言しなければなりません:
-
-``` js
-const myMiddlewareWithSnapshot = {
-  snapshot: true,
-  onMutation (mutation, nextState, prevState) {
-    // prevState と nextState は完全コピーされた(deep-cloned)、
-    // 前のミューテーションの後のミューテーションのスナップショット
-  }
-}
-```
-
-**ステートのスナップショットを撮るミドルウェアは開発時のみに使用すべきです。** Webpack または Browserify を使用するとき、私たちのためにビルドツールがそれを処理することができます:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  middlewares: process.env.NODE_ENV !== 'production'
-    ? [myMiddlewareWithSnapshot]
-    : []
-})
-```
-
-ミドルウェアはデフォルトで使用されるでしょう。本番環境のため、`process.env.NODE_ENV !== 'production'` の値を `false` に変換するために、[ここ](http://vuejs.org/guide/application.html#Deploying_for_Production) で説明したビルドセットアップを最終ビルド向けに使用します。
-
-### ビルドイン Logger ミドルウェア
-
-Vuex は一般的なデバッギングを使用するための logger ミドルウェアが付属しています:
-
-``` js
-const store = new Vuex.Store({
-  middlewares: [Vuex.createLogger()]
-})
-```
-
-`createLogger` 関数はいくつかのオプションがあります:
-
-``` js
-const logger = Vuex.createLogger({
-  collapsed: false, // ログに記録されたミューテーションを自動拡大する
-  transformer (state) {
-    // それを記録す前にステートを変換する
-    // 例えば、特定のサブツリーだけ返します
-    return state.subTree
-  },
-  mutationTransformer (mutation) {
-    // ミューテーションは { type, payload } の形式で記録される
-    // どんな形式でも欲しいフォーマットに変換できる
-    return mutation.type
-  }
-})
-```
-
-ステートのスナップショットを撮る logger ミドルウェアは開発時のみ使用することに注意してください。

+ 0 - 95
docs/ja/mutations.md

@@ -1,95 +0,0 @@
-# ミューテーション
-
-Vuex のミューテーションは基本的にイベントです。各ミューテーションは**名前**と**ハンドラ**を持ちます。ハンドラ関数は常に全体のステートツリーを第1引数として取得します:
-
-``` js
-import Vuex from 'vuex'
-
-const store = new Vuex.Store({
-  state: {
-    count: 1
-  },
-  mutations: {
-    INCREMENT (state) {
-      // 変異するステート
-      state.count++
-    }
-  }
-})
-```
-
-ミューテーション名に対して全て大文字を使用するのは、容易にアクションと区別できるようにするための規則です。
-
-直接ミューテーションハンドラ呼び出すことはできません。ここでのオプションは、よりイベント登録のようなものです。"`INCREMENT` イベントがディスパッチされるとき、このハンドラは呼ばれます。"ミューテーションハンドラを起動するためには、ミューテーションイベントをディスパッチする必要があります:
-
-``` js
-store.dispatch('INCREMENT')
-```
-
-### 引数によるディスパッチ
-
-引数に沿って渡すことも可能です:
-
-``` js
-// ...
-mutations: {
-  INCREMENT (state, n) {
-    state.count += n
-  }
-}
-```
-``` js
-store.dispatch('INCREMENT', 10)
-```
-
-ここの `10` は `state` に続く第2引数としてミューテーションハンドラに渡されます。任意の追加引数と同じです。これら引数は、特定のミューテーションに対して**ペイロード**と呼ばれています。
-
-### Vue のリアクティブなルールに従うミューテーション
-
-Vuex store のステートは Vue によってリアクティブになっているので、ステートを変異するとき、ステートを監視している Vue コンポーネントは自動的に更新されます。これはまた、Vuex のミューテーションは、純粋な Vue で動作しているとき、同じリアクティブな警告の対象となっているのを意味します:
-
-1. 前もって全て望まれるフィールドによって、あなたの store の初期ステートを初期化することを好みます
-
-2. 新しいプロパティをオブジェクトに追加するとき、いずれか必要です:
-
-  - `Vue.set(obj, 'newProp', 123)` を使用または -
-
-  - 全く新しいものでオブジェクトを置き換える。例えば、stage-2 の [object spread syntax](https://github.com/sebmarkbage/ecmascript-rest-spread) を使用して、このようにそれを書くことができます:
-
-  ``` js
-  state.obj = { ...state.obj, newProp: 123 }
-  ```
-
-### ミューテーション名に対して定数を使用
-
-ミューテーション名には定数を使用することが一般的です。コードに対してリンタのようなツールの長所を利用することができ、そして、単一ファイルに全ての定数を設定することは、あなたの協力者にミューテーションがアプリケーション全体で可能であるかが一目見ただけで理解できるビューを得ることができます:
-
-``` js
-// mutation-types.js
-export const SOME_MUTATION = 'SOME_MUTATION'
-```
-
-``` js
-// store.js
-import Vuex from 'vuex'
-import { SOME_MUTATION } from './mutation-types'
-
-const store = new Vuex.Store({
-  state: { ... },
-  actions: { ... },
-  mutations: {
-    // 定数を関数名として使用できる ES2015 の算出プロパティ (computed property) 名機能を使用できます
-    [SOME_MUTATION] (state) {
-      // 変異するステート
-    }
-  }
-})
-```
-
-定数を使用するかどうか大部分が好みであり、それは多くの開発者による大規模アプリケーションで役に立ちますが、好きではないならば、それは完全にオプションです。
-
-### アクションの上へ
-
-これまでのところ、`store.dispatch` の手動呼び出しによってミューテーションをトリガしていました。これは実行可能なアプローチですが、実際には私たちのコンポーネントのコードでこれを行うことはほとんどありません。ほとんどの時間、[アクション](actions.md) を呼び出し、非同期データフェッチングのようなより複雑なロジックをカプセル化することができます。
-
-また、全てのミューテーションハンドラは**同期**でなければならないという、1つ重要なルールを覚えておきましょう。任意の非同期な操作はアクションに属しています。

+ 0 - 2
docs/ja/quickstart.md

@@ -1,2 +0,0 @@
-# Quickstart
-

+ 0 - 51
docs/ja/state.md

@@ -1,51 +0,0 @@
-# ステート
-
-### 単一ステートツリー
-
-Vuex は**単一ステートツリー (single state tree)**を使用します。つまり、この単一なオブジェクトはあなたのアプリケーションレベルの状態が全て含まれており、"信頼できる唯一の情報源 (single source of truth)" として機能します。これは状態の特定の部分を見つけることが容易になり、そしてデバッギング目的のために現在のアプリケーション状態のスナップショットを取ることも容易にできます。
-
-単一ステートツリーはモジュールとコンフリクト(競合)しません。以降の章では、あなたの状態管理ロジックをサブモジュールにおいてどうやって分離するかについて説明します。
-
-### Vue コンポーネントにおいて Vuex ステートを取得する
-`state` オブジェクトは、Vue インスタンスに渡される `data` オブジェクトに似ており、一度 Vuex store に渡され、[Vue のリアクティブシステム](http://vuejs.org/guide/reactivity.html) によってリアクティブになります。これは、Vue コンポーネントにバインディングする Vuex state は、算出プロパティ (computed property) の中からそれを返すのと同じくらい簡単なことを意味します:
-
-``` js
-// Vue コンポーネントモジュール内部
-
-// vuex store をインポート
-import store from './store'
-
-export default {
-  computed: {
-    message () {
-      return store.state.message
-    }
-  }
-}
-```
-
-store にコンポーネントを設定し、そしてリスナを切断または"接続する"心配の必要はりません。覚えておくくべき唯一のことは、**常にあなたの算出プロパティ内部で `store.state.xxx` 経由でステートを参照する**必要があるということです。算出プロパティ外のステートの一部への参照をキャッシュしないでください。
-
-> Flux リファレンス: これは雑ですが Redux での [`mapStateToProps`](https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) と NuclearJS での [getters](https://optimizely.github.io/nuclear-js/docs/04-getters.html) と比較することができます。
-
-なぜ、ステートにバインドするために `data` を使用しないのでしょうか?次の例を考えてみます:
-
-``` js
-export default {
-  data () {
-    return {
-      message: store.state.message
-    }
-  }
-}
-```
-
-`data` 関数は任意のリアクティブな依存関係を追跡していないため、`store.state.message` への静的な参照だけを取得してます。ステートが後で変異したとき、コンポーネントは何かが変化しときのアイデアを持っていません。比較して、算出プロパティはそれらが評価されたときリアクティブな依存関係を全て追跡し、関連するステートが変異されているとき、反応性を再評価します。
-
-### コンポーネントは直接ステートを変異することはできない
-
-読み取り専用の算出プロパティを使用すると、**コンポーネントは直接 Vuex store のステートを変異させるべきではない**というルールを強調するのを援助するという別の利点を持っています。全てのステートのミューテーションを明示的および追跡可能にしたいため、全ての vuex store のミューテーションは store のミューテーションハンドラ内部で行われければなりません。
-
-このルールを強制するのを援助するために、[厳格モード](strict.md) で store のステートがミューテーションハンドラの外部で変異された場合は、Vuex はエラーを投げます。
-
-代わりにこのルールでは、私達の Vue コンポーネントははるかに少ない責務で済みます。読み取り専用の算出プロパティを介して Vuex store のステートにバインドされており、ステートに影響を与えるための唯一の方法は、**アクション**によって呼び出され、順番に**ミューテーション** をトリガすることです。必要であれば、まだ所有しローカルステートに操作できますが、もはや個々のコンポーネント内部には、任意のデータフェッチまたはグローバルステートミューテーティングロジックを入れていません。

+ 0 - 25
docs/ja/strict.md

@@ -1,25 +0,0 @@
-# 厳格モード
-
-厳格モードを有効にするには、Vuex store を作成するときに、単純に `strict: true` を指定します:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  strict: true
-})
-```
-
-厳格モードでは、Vuex のステートがミューテーションハンドラの外部で変異されたときはいつでも、エラーを投げます。これは全てのステートの変異がデバッギングツールによって明示的に追跡できるようになります。
-
-### 開発環境 vs 本番環境
-
-**本番環境に対して 厳格モードを有効にしてデプロイしてはなりません!** 厳格モードでは不適切なミューテーションを検出するためにステートツリー上で深い監視を実行します。パフォーマンスコストを回避するために本番環境ではそれをオフにしてください。
-
-ミドルウェアと同様に、ビルドツールに処理させることができます:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  strict: process.env.NODE_ENV !== 'production'
-})
-```

+ 0 - 133
docs/ja/structure.md

@@ -1,133 +0,0 @@
-# アプリケーションの構造
-
-Vuex は本当にあなたのコードを構造化する方法を制限するものでありません。むしろ以下の見解が求められます:
-
-1. アプリケーションステートは単一オブジェクトで生存します
-2. ミューテーションハンドラだけステートを変異できます
-3. ミューテーションは同期でなければなく、そしてそれらを作成するだけの副作用はミューテーションとステートになるべきです
-4. データフェッチングのような全ての非同期ロジックはアクションで実行されるべきです
-
-Vuex のアクションとミューテーションの良いところは、**それらは関数である**ということです。これらのルールに従っている限り、あなたのプロジェクトで構造化する方法はあなた次第です。最も単純な Vuex インスタンスは[単一ファイルで](https://github.com/vuejs/vuex/blob/master/examples/counter/vuex.js)さえ宣言できるということです!しかしながら、これは任意の重大なプロジェクトに対しては十分ではなく、ここではあなたのアプリケーションの規模に応じて、いくつか推奨される構造を紹介します。
-
-### 単純なプロジェクト
-
-単純なプロジェクトに対しては、単純に**アクション**と**ミューテーション**をそれぞれのファイルに分離することができます:
-
-``` bash
-.
-├── index.html
-├── main.js
-├── components
-│   ├── App.vue
-│   └── ...
-└── store
-    ├── index.js     # vuex store をエクスポート
-    ├── actions.js   # 全てのアクションをエクスポート
-    └── mutations.js # 全てのミューテーションをエクスポート
-```
-
-実際の例として、[TodoMVC example](https://github.com/vuejs/vuex/tree/master/examples/todomvc) を確認してください。
-
-### 中〜大規模プロジェクト
-
-任意の素晴らしいアプリケーションに対して、多分、Vuex 関連のコードをさらに私たちのアプリケーションを特定のドメインによって各お気に入りの複数"モジュール" (雑にいうと、純粋な Flux で "stores" にほぼ匹敵)に分離したいです。各サブモジュールはステートのサブツリーを管理することになり、そのサブツリーとそのサブツリーで操作する全てのミューテーションに対する初期ステートをエクスポートします:
-
-``` bash
-├── index.html
-├── main.js
-├── api
-│   └── ... # API リクエストを作成するために抽象化
-├── components
-│   ├── App.vue
-│   └── ...
-└── store
-    ├── actions.js # 全てのアクションをエクスポート
-    ├── index.js
-    ├── modules
-    │   ├── cart.js       # ステートとカート向けのミューテーション
-    │   └── products.js   # ステートと製品向けのミューテーション
-    └── mutation-types.js # 定数
-```
-
-典型的なモジュールは次のようになります:
-
-``` js
-// vuex/modules/products.js
-import { RECEIVE_PRODUCTS, ADD_TO_CART } from '../mutation-types'
-
-// 初期ステート
-export const productsInitialState = []
-
-// ミューテーション
-export const productsMutations = {
-  [RECEIVE_PRODUCTS] (state, products) {
-    state.products = products
-  },
-
-  [ADD_TO_CART] ({ products }, productId) {
-    const product = products.find(p => p.id === productId)
-    if (product.inventory > 0) {
-      product.inventory--
-    }
-  }
-}
-```
-
-そして `store/index.js` では、Vuex インスタンスを作成するために複数のモジュールをいっしょに"組み立てます(assemble)":
-
-``` js
-import Vue from 'vue'
-import Vuex from '../../../src'
-import * as actions from './actions'
-// modules からパーツをインポート
-import { cartInitialState, cartMutations } from './modules/cart'
-import { productsInitialState, productsMutations } from './modules/products'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  // ...
-  // root なステートにサブツリーを結合
-  state: {
-    cart: cartInitialState,
-    products: productsInitialState
-  },
-  // ミューテーションは複数の modules から
-  // ミューテーション定義オブジェクトの配列にすることが可能
-  mutations: [cartMutations, productsMutations]
-})
-```
-
-全てのモジュールは単純にオブジェクトと関数をエクスポートするため、テストとメンテナンスすることが非常に簡単です。また、あなたの好みに合った構造を見つけるためにここで使用されるパターンを変えることは自由です。
-
-単一のアクションは、複数のモジュールに影響を与えるミューテーションをディスパッチする可能性があるため、モジュールにアクションを置いていないことに注意してください。また、ステートの形式と、より良い関心事の分離のためにミューテーションの実装詳細からアクションを分離するもの良いアイデアです。アクションファイルが大きくなりすぎた場合は、フォルダにそれを格納し、個々のファイルへ長い非同期アクションの実装を分割できます。
-
-実際の例として、[Shopping Cart Example](https://github.com/vuejs/vuex/tree/master/examples/shopping-cart) を確認してください。
-
-### 共有された算出プロパティ Getter の抽出
-
-大規模なプロジェクトでは、複数のコンポーネントが Vuex のステートに基づいて同じ算出プロパティ (computed property) を必要とする可能性があります。算出プロパティは単に関数であるため、それらが任意のコンポーネントで共有することができるように、ファイルにそれらを分割することができます:
-
-``` js
-// getters.js
-import store from './store'
-
-export function filteredTodos () {
-  return store.state.messages.filter(message => {
-    return message.threadID === store.state.currentThreadID
-  })
-}
-```
-
-``` js
-// コンポーネントで...
-import { filteredTodos } from './getters'
-
-export default {
-  computed: {
-    filteredTodos
-  }
-}
-```
-
-これはとても [NuclearJS での Getter](https://optimizely.github.io/nuclear-js/docs/04-getters.html) と似ています。

+ 0 - 135
docs/ja/testing.md

@@ -1,135 +0,0 @@
-# テスト
-
-ミューテーションは完全に引数に依存しているだけの関数であるため、テストするのがとても簡単です。アクションは外部の API を呼び出す可能性があるためより少し注意が必要です。アクションをテストするとき、通常モックのいくつかのレベルで実行する必要があります。例えば、サービスでの API 呼び出しを抽象化することができ、そしてテスト内部でサービスをモックにすることができます。簡単に依存を真似るために、Webpack と [inject-loader](https://github.com/plasticine/inject-loader) をテストファイルにバンドルして使用することができます。
-
-ミューテーションやアクションが適切に書かれている場合は、テストは適切なモック後、ブラウザの API に直接依存関係を持つべきではありません。したがって、単純に Webpack でテストをバンドルでき、それを直接 Node で実行できます。別の方法として、本当のブラウザでテストを実行するためには、`mocha-loader` または Karma + `karma-webpack` を使用できます。
-
-Mocha + Chai を使用してミューテーションをテストする例です (好きな任意のフレームワーク/アサーションライブラリを使用できます):
-
-``` js
-// mutations.js
-export const INCREMENT = state => state.count++
-```
-
-``` js
-// mutations.spec.js
-import { expect } from 'chai'
-import { INCREMENT } from './mutations'
-
-describe('mutations', () => {
-  it('INCREMENT', () => {
-    // モックステート
-    const state = { count: 0 }
-    // ミューテーションを適用
-    INCREMENT(state)
-    // 結果を検証
-    expect(state.count).to.equal(1)
-  })
-})
-```
-
-Example testing an async action:
-
-``` js
-// actions.js
-import shop from '../api/shop'
-
-export const getAllProducts = ({ dispatch }) => {
-  dispatch('REQUEST_PRODUCTS')
-  shop.getProducts(products => {
-    dispatch('RECEIVE_PRODUCTS', products)
-  })
-}
-```
-
-``` js
-// actions.spec.js
-
-// inline loader に対して require 構文を使用する
-// inject-loader は、真似られた依存関係を注入できるようにする
-// モジュールファクトリを返す
-import { expect } from 'chai'
-const actionsInjector = require('inject!./actions')
-
-// モックによってモジュールを作成する
-const actions = actionsInjector({
-  '../api/shop': {
-    getProducts (cb) {
-      setTimeout(() => {
-        cb([ /* 真似られたスポンス */ ])
-      }, 100)
-    }
-  }
-})
-
-// ミューテーションによって予期されたアクションをテストするためのヘルパー
-const testAction = (action, state, expectedMutations, done) => {
-  let count = 0
-  // モックディスパッチ
-  const dispatch = (name, payload) => {
-    const mutation = expectedMutations[count]
-    expect(mutation.name).to.equal(name)
-    if (payload) {
-      expect(mutation.payload).to.deep.equal(payload)
-    }
-    count++
-    if (count >= expectedMutations.length) {
-      done()
-    }
-  }
-  // 真似られた store によってアクションを呼び出す
-  action({
-    dispatch,
-    state
-  })
-}
-
-describe('actions', () => {
-  it('getAllProducts', done => {
-    testAction(actions.getAllProducts, {}, [
-      { name: 'REQUEST_PRODUCTS' },
-      { name: 'RECEIVE_PRODUCTS', payload: [ /* 真似られたレスポンス */ ] }
-    ], done)
-  })
-})
-```
-
-### Node での実行
-
-以下のような webpack の設定を作成します:
-
-``` js
-module.exports = {
-  entry: './test.js',
-  output: {
-    path: __dirname,
-    filename: 'test-bundle.js'
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        loader: 'babel',
-        exclude: /node_modules/
-      }
-    ]
-  },
-  babel: {
-    presets: ['es2015']
-  }
-}
-```
-
-その後、下記コマンドを実行します:
-
-``` bash
-webpack
-mocha test-bundle.js
-```
-
-### ブラウザでの実行
-
-1. `mocha-loader` をインストール
-2. 上記 Webpack 設定から `entry` を `'mocha!babel!./test.js'` に変更
-3. 設定を使用して `webpack-dev-server` を開始
-4. `localhost:8080/webpack-dev-server/test-bundle` に移動

二进制
docs/ja/vuex.png


+ 0 - 1
docs/pt/README.md

@@ -1 +0,0 @@
-SUMMARY.md

+ 0 - 19
docs/pt/SUMMARY.md

@@ -1,19 +0,0 @@
-# Índice
-
-> Tenha certeza de ler a documentação na ordem a seguir.
-
-- [O que é o Vuex?](intro.md)
-- [Primeiros Passos](getting-started.md)
-- [Tutorial](tutorial.md)
-- Principais Conceitos
-  - [Estado e Getters](state.md)
-  - [Mutações](mutations.md)
-  - [Ações](actions.md)
-- [Fluxo de Dados](data-flow.md)
-- [Estrutura da Aplicação](structure.md)
-- [Middlewares](middlewares.md)
-- [Strict Mode](strict.md)
-- [Manipulação de Formulários](forms.md)
-- [Testes](testing.md)
-- [Hot Reloading](hot-reload.md)
-- [Referência da API](api.md)

+ 0 - 134
docs/pt/actions.md

@@ -1,134 +0,0 @@
-# Ações
-
-> Ações no Vuex são na verdade "action creators" em definições puras do Flux, mas eu achei esse termo mais confuso do que útil.
-
-Ações são apenas funções que disparam mutações. Por convenção, as ações Vuex sempre esperam uma instância de um armazem (store) como primeiro parâmetro, seguido por parâmetros adicionais, que são opcionais:
-
-``` js
-// the simplest action
-function increment (store) {
-  store.dispatch('INCREMENT')
-}
-
-// a action with additional arguments
-// with ES2015 argument destructuring
-function incrementBy ({ dispatch }, amount) {
-  dispatch('INCREMENT', amount)
-}
-```
-
-Isso pode parecer bobo a primeira vista: por que nós simplesmente não disparamos mutações diretamente? Bem, você se lembra que **mutações devem ser síncronas**? Ações não. Nós podemos realizar operações **assíncronas** dentro de uma ação:
-
-``` js
-function incrementAsync ({ dispatch }) {
-  setTimeout(() => {
-    dispatch('INCREMENT')
-  }, 1000)
-}
-```
-
-Um exemplo mais prático seria uma ação para realizar o checkout em um carrinho de compras, o que envolve **chamar uma API assíncrona** e **disparar múltiplas mutações**:
-
-``` js
-function checkout ({ dispatch, state }, products) {
-  // save the current in cart items
-  const savedCartItems = [...state.cart.added]
-  // send out checkout request, and optimistically
-  // clear the cart
-  dispatch(types.CHECKOUT_REQUEST)
-  // the shop API accepts a success callback and a failure callback
-  shop.buyProducts(
-    products,
-    // handle success
-    () => dispatch(types.CHECKOUT_SUCCESS),
-    // handle failure
-    () => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
-  )
-}
-```
-
-Note que ao invés de esperar um retorno ou passar callback para ações, o resultado de chamar uma API assíncrona é lidado ao disparar novas mutações. A política de boa prática vizinhança aqui é que **o único efeito colateral gerado ao chamar ações deve ser disparar mutações**.
-
-### Chamando Ações em Componentes
-
-Você deve ter percebido que uma função de ação não pode ser chamada diretamente sem referenciar uma instância do armazém. Tecnicamente, nós podemos invocar uma ação utilizando `action(this.$store)` dentro de um método, mas é melhor se nós pudermos expor versões de ações diretamente "ligadas" aos métodos dos componentes, e assim nós poderíamos facilmente referenciá-las dentro de templates. Nós podemos fazer isso utilizando a opção `vuex.actions`:
-
-``` js
-// inside a component
-import { incrementBy } from './actions'
-
-const vm = new Vue({
-  vuex: {
-    getters: { ... }, // state getters
-    actions: {
-      incrementBy // ES6 object literal shorthand, bind using the same name
-    }
-  }
-})
-```
-
-O que o código acima faz é vincular a ação `incrementBy` a instância local do armazém do componente, e expô-lo no componente como se fosse um método da instância, acessado via `vm.incrementBy`. Qualquer argumento passado para o método `vm.incrementBy` será passado para a ação que importamos depois do primeiro argumento, que é nosso armazém. Então, ao chamar:
-
-``` js
-vm.incrementBy(1)
-```
-
-é o mesmo que:
-
-``` js
-incrementBy(vm.$store, 1)
-```
-
-Mas o benefício é que nós podemos vincular essa ação ao template do componente e utilizá-lo mais facilmente:
-
-``` html
-<button v-on:click="incrementBy(1)">increment by one</button>
-```
-
-E você pode usar um nome diferente ao método ao vincular uma ação:
-
-``` js
-// inside a component
-import { incrementBy } from './actions'
-
-const vm = new Vue({
-  vuex: {
-    getters: { ... },
-    actions: {
-      plus: incrementBy // bind using a different name
-    }
-  }
-})
-```
-
-Agora a ação será conectada como `vm.plus` ao invés de `vm.incrementBy`.
-
-### Ações Inline
-
-Se uma ação é específica à um componente, você pode utilizar um atalho e definí-la diretamente no componente:
-
-``` js
-const vm = new Vue({
-  vuex: {
-    getters: { ... },
-    actions: {
-      plus: ({ dispatch }) => dispatch('INCREMENT')
-    }
-  }
-})
-```
-
-### Vinculando todas Ações
-
-Se você quiser vincular todas as ações compartilhadas:
-
-``` js
-import * as actions from './actions'
-
-const vm = new Vue({
-  vuex: {
-    getters: { ... },
-    actions // bind all actions
-  }
-})
-```

+ 0 - 94
docs/pt/api.md

@@ -1,94 +0,0 @@
-# Referência da API
-
-### Vuex.Store
-
-``` js
-import Vuex from 'vuex'
-
-const store = new Vuex.Store({ ...options })
-```
-
-### Opções do Construtor Vuex.Store
-
-- **state**
-
-  - tipo: `Objeto`
-
-    O objeto de estado raíz para o armazém Vuex.
-
-    [Detalhes](state.md)
-
-- **mutations**
-
-  - tipo: `Objeto`
-
-    Um objeto onde cada entrada é o nome de uma mutação e o valor é uma função, que é o handler. A função handler sempre recebe o `state` (estado) como primeiro parâmetro, e recebe todos os outros parâmetros passados para a chamada da mutação após esse.
-
-    [Detalhes](mutations.md)
-
-- **modules**
-
-  - tipo: `Objeto`
-
-    Um objeto que contém submódulos para serem combinados dentro do armazém, no seguinte formato:
-
-    ``` js
-    {
-      key: {
-        state,
-        mutations
-      },
-      ...
-    }
-    ```
-
-    Cada módulo pode conter `state` (estado) e `mutations` (mutações) assim como as opções da raíz do Vuex. O estado do módulo será combinado com o estado do armazém principal do Vuex utilizando a opção "modules". As mutações de um módulo somente receberão o estado daquele módulo como primeiro parâmetros, ao invés de todo o estado do armazém.
-
-- **middlewares**
-
-  - tipo: `Array<Objeto>`
-
-    Um array de objetos de middleware que estão no seguinte formato:
-
-    ``` js
-    {
-      snapshot: Boolean, // padrão: false
-      onInit: Function,
-      onMutation: Function
-    }
-    ```
-
-    Todos os campos são opcionais. [Detalhes](middlewares.md)
-
-- **strict**
-
-  - tipo: `Boolean`
-  - padrão: `false`
-
-    Força o armazém do Vuex a se comportar com o modo strict. Quando esse módulo está ativado qualquer mutação ao Vuex que são realizadas fora dos handlers das mutações irão disparar um erro.
-
-    [Detalhes](strict.md)
-
-### Propriedades da Instância Vuex.Store
-
-- **state**
-
-  - tipo: `Objeto`
-
-    O estado raíz. Somente leitura.
-
-### Métodos da Instância Vuex.Store
-
-- **dispatch(mutationName: String, ...args)**
-
-  Dispara diretamente uma mutação. Isso é útil em algumas situações, mas geralmente você ira preferir utilizar as ações no seu código.
-
-- **watch(pathOrGetter: String|Function, cb: Function, [options: Object])**
-
-  Observa um caminho ou o valor de uma função getter, e chama o callback quando o valor é modificado. Aceita opções não obrigatórias idênticas ao do método `vm.$watch` do Vue.
-
-  Para finalizar a observação, chame a função de retorno.
-
-- **hotUpdate(newOptions: Object)**
-
-  Atualização em tempo real de ações e mutações. [Detalhes](hot-reload.md)

+ 0 - 1
docs/pt/book.json

@@ -1 +0,0 @@
-../book.json

+ 0 - 89
docs/pt/data-flow.md

@@ -1,89 +0,0 @@
-# Fluxo de Dados
-
-Vamos construir um simples contador com Vuex para entender um pouco melhor o fluxo de dados dentro de aplicações Vuex. Note que esse é um exemplo trivial somente com o objetivo de explicar os conceitos - na prática você não precisa do Vuex para um app tão simples.
-
-### O Armazém
-
-``` js
-// store.js
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-// estado inicial do app
-const state = {
-  count: 0
-}
-
-// definindo as possíveis mutações
-const mutations = {
-  INCREMENT (state) {
-    state.count++
-  },
-  DECREMENT (state) {
-    state.count--
-  }
-}
-
-// criando o armazém
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-### Ações
-
-``` js
-// actions.js
-export const increment = ({ dispatch }) => dispatch('INCREMENT')
-export const decrement = ({ dispatch }) => dispatch('DECREMENT')
-```
-
-### Utilizando-o com o Vue
-
-**Template**
-
-``` html
-<div id="app">
-  Clicked: {{ count }} times
-  <button v-on:click="increment">+</button>
-  <button v-on:click="decrement">-</button>
-</div>
-```
-
-**Script**
-
-``` js
-// Nós estamos importando e injetando o armazém aqui porque
-// essa é nossa instância raiz. Em aplicações maiores você só precisa fazer isso uma vez.
-import store from './store'
-import { increment, decrement } from './actions'
-
-const app = new Vue({
-  el: '#app',
-  store,
-  vuex: {
-    getters: {
-      count: state => state.count
-    },
-    actions: {
-      increment,
-      decrement
-    }
-  }
-})
-```
-
-Aqui você irá notar que o componente é extremamente simples: Ele exibe um estado do armazém Vuex (nem mesmo tem seus próprios dados), e chama algumas ações do armazém quando o usuário dispara um evento.
-
-Você também irá perceber que o fluxo de dados é unidirecional, como deveria ser no Flux:
-
-1. O input do usuário no componente dispara uma chamada para uma ação;
-2. As Ações disparam mutações que modificam o estado;
-3. As alterações no estado são refletidas no componente via getters.
-
-<p align="center">
-  <img width="700px" src="vuex.png">
-</p>

+ 0 - 41
docs/pt/forms.md

@@ -1,41 +0,0 @@
-# Manipulação de Formulários
-
-Ao utilizar o modo strict do Vuex, é um pouquinho diferente o uso do `v-model`, já que o estado pertence ao Vuex:
-
-``` html
-<input v-model="obj.message">
-```
-
-Assumindo que `obj` é uma computed property que retorna um Objeto do armazém, o `v-model` aqui irá tentar modificar o valor do `obj.message` diretamente quando o usuário digitar algo. Com o modo strict, isso vai resultar em um erro, porque a mutação não é realizada dentro de uma mutação explícita do Vuex.
-
-A maneira "Vuex" de lidar com os formulários é vincular o valor do `<input>`' e chamar uma ação nos eventos `input` ou `change`:
-
-``` html
-<input :value="message" @input="updateMessage">
-```
-``` js
-// ...
-vuex: {
-  getters: {
-    message: state => state.obj.message
-  },
-  actions: {
-    updateMessage: ({ dispatch }, e) => {
-      dispatch('UPDATE_MESSAGE', e.target.value)
-    }
-  }
-}
-```
-
-E aqui é o handler da mutação:
-
-``` js
-// ...
-mutations: {
-  UPDATE_MESSAGE (state, message) {
-    state.obj.message = message
-  }
-}
-```
-
-Sim, isso é bem mais extenso do que simplesmente utilizar um `v-model`, mas esse é o custo de fazer com que as modificações do estado sejam explícitas e rastreáveis. Ao mesmo tempo, note que o Vuex não demanda que você adicione todo o estado no armazém - se você não quiser rastrear mas mutações para as interações de formulário, você pode simplesmente manter o estado do formulário fora do Vuex como o estado local do componente, o que lhe permite utilizar livremente o `v-model`.

+ 0 - 53
docs/pt/getting-started.md

@@ -1,53 +0,0 @@
-# Getting Started
-
-No centro de cada aplicação Vuex existe um "armazém", que você verá nos exemplos como **store**. Um "armazem" é basicamente um container que armazena o **estado** da sua aplicação. Existem duas coisas que fazem esse armazem do Vuex ser diferente de um objeto global simples:
-
-1. Os "armazéns" do Vuex são reativas. Quando os componentes Vue recuperam o estado a partir dele, eles irão funcionar reativamente e realizarão uma atualização eficientemente se o estado for modificado no armazém.
-
-2. Você não pode modificar o estado do armazém diretamente. A única forma de alterar o estado é disparando **mutações** explicitamente. Isso faz com que cada mudança no estado seja fácil de ser gravada, e possibilita o uso de ferramentas que nos ajude a compreender melhor nossas aplicações.
-
-### O armazém mais simples
-
-> **NOTA:** Nós utilizaremos a sintaxe do ES2015 para exemplos de código em toda a documentação. Se você ainda não aprendeu a utilizá-lo, [você deveria](https://babeljs.io/docs/learn-es2015/)! Essa documentação também assume que você está familiarizado com os conceitos discutidos em [Construindo Aplicações de Larga Escala com Vue.js](http://vuejs.org/guide/application.html).
-
-Criar um armazem Vuex é bem simples. Você apenas precisa informar um objeto que é seu estado inicial, e alguma mutação:
-
-``` js
-import Vuex from 'vuex'
-
-const state = {
-  count: 0
-}
-
-const mutations = {
-  INCREMENT (state) {
-    state.count++
-  }
-}
-
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-Agora, você pode acessar o objeto que contém o estado como `store.state`, e disparar uma mutação utilizando o método <i>dispatch</i> e o nome da aplicação:
-
-``` js
-store.dispatch('INCREMENT')
-
-console.log(store.state.count) // -> 1
-```
-
-Se você preferir utilizar o formato de objeto para os parâmetros, você pode utilizar o exemplo a seguir:
-
-``` js
-// O mesmo efeito que o exemplo anterior
-store.dispatch({
-  type: 'INCREMENT'
-})
-```
-
-Novamente, a razão para nós dispararmos uma mutação ao invés de modificar diretamente o valor de `store.state.count` é porque queremos explicitamente rastrear a modificação. Essa simples convenção faz com que suas intenções fiquem mais explícitas, e assim você pode compreender as modificações do estado mais facilmente quando ler seu código. Além disso, isso nos dá a oportunidade de implementar ferramentas que podem realizar um log para todas as mutações, tirar <i>snapshots</i> do estado e até mesmo utilizar <i>time travel debugging</i>.
-
-Agora esse é apenas uma simples exemplo do que é um armazém Vuex. Mas o Vuex é bem mais do que isso. A seguir, iremos discutir alguns dos conceitos principais mais a fundo: [Estado](state.md), [Mutações](mutations.md) e [Ações](actions.md).

+ 0 - 44
docs/pt/hot-reload.md

@@ -1,44 +0,0 @@
-# Hot Reloading
-
-Vuex suporta hot-reloading para mutações, módulos, ações e getters durante desenvolvimento, utilizando o [Hot Module Replacement API](https://webpack.github.io/docs/hot-module-replacement.html) do Wepack. Você também pode utilizar com Browserify utilizando o plugin [browserify-hmr](https://github.com/AgentME/browserify-hmr/).
-
-Para mutações e módulos, você precisa utilizar o método `store.hotUpdate()` da API:
-
-``` js
-// store.js
-import Vue from 'vue'
-import Vuex from 'vuex'
-import mutations from './mutations'
-import moduleA from './modules/a'
-
-Vue.use(Vuex)
-
-const state = { ... }
-
-const store = new Vuex.Store({
-  state,
-  mutations,
-  modules: {
-    a: moduleA
-  }
-})
-
-if (module.hot) {
-  // accept actions and mutations as hot modules
-  module.hot.accept(['./mutations', './modules/a'], () => {
-    // require the updated modules
-    // have to add .default here due to babel 6 module output
-    const newMutations = require('./mutations').default
-    const newModuleA = require('./modules/a').default
-    // swap in the new actions and mutations
-    store.hotUpdate({
-      mutations: newMutations,
-      modules: {
-        a: newModuleA
-      }
-    })
-  })
-}
-```
-
-Você não precisa fazer nada em específico para ações e getters. O sistema de substituição do Webpack's vai lidar com toda a parte das atualizações - e as mudanças em ações e getters irão ocorrer automaticamente nos componentes Vue que utilizam-nas. Como os componentes Vue carregados via `vue-loader` são recarregados automaticamente, esses componentes que forem afetados com mudanças vão se recarregar automaticamente e utilizarão as ações e getters mais recentes.

+ 0 - 13
docs/pt/intro.md

@@ -1,13 +0,0 @@
-## O que é o Vuex?
-
-Vuex é uma arquitetura de aplicações para gerenciamento de estado centralizado em aplicações Vue.js. Foi desenvolvido inspirado no [Flux](https://facebook.github.io/flux/) e também no [Redux](https://github.com/rackt/redux), mas com conceitos simplificados e com uma implementação que foi feita especificamente para utilizar as vantagens do sistema de reatividade do Vue.js
-
-## Por que eu preciso disso?
-
-Se o seu aplicativo for simples, você provavelmente não precisa utilizar o Vuex. Não o aplique prematuramente. Mas se você estiver construindo uma SPA (Single Page Application) de médio a grande porte, é bem provável que você lidará com situações que lhe farão pensar como estruturar sua aplicação fora dos seus componentes Vue. E é aí que o Vuex entra em cena.
-
-Quando utilizamos somente o Vue.js, nós geralmente armazenamos o estado da aplicação "dentro" de nossos componentes. Isso significa que cada componente é dona de uma parte do estado de nossa aplicação, e como resultado disso é que o estado fica espalhado por toda a aplicação. Entretanto, algumas vezes você precisa compartilhar parte do estado com vários componentes. Uma prática muito utilizada é deixar que o componente "emita" um evento para outro componente e compartilhe parte do estado. O problema com esse padrão é que o fluxo de evento dentro de aplicações mais complexas com vários componentes começa a se tornar confuso e difícil de compreender, e isso pode induzir você a erros.
-
-Para lidar com o estado em aplicações complexas, nós precisamos diferenciar o **estado do componente local** e **o estado da aplicação**. O estado da Aplicação não pertence a um componente específico, mas nossos componentes ainda podem observá-lo para realizar updates reativos no DOM. Ao centralizar o seu gerenciamento em um local, nós não precisamos mais emitir eventos para transmitir dados, porque tudo que afeta mais que um componente deve percenter ao estado da Aplicação. Além disso, isso nos permite gravar e inspecionar todas as mutações para compreender melhor as mudanças no estado, e até implementar coisas mais interessantes como o <i>time-travel debugging</i>.
-
-O Vuex também é explícito em relação a como você deve separar a lógica de gerenciamento de estado em diferentes arquivos, porém tem flexibilidade suficiente para que você o aplique em seu código atual.

+ 0 - 82
docs/pt/middlewares.md

@@ -1,82 +0,0 @@
-# Middlewares
-
-Os armazéns Vuex aceitam a opção `middlewares` que expõem hooks para cada mutação (Note que isso é completamente não relacionado aos middlewares Redux). Um middleware Vuex é simplesmente um objeto que implementam algumas funções de hook:
-
-``` js
-const myMiddleware = {
-  onInit (state, store) {
-    // estado inicial do registro
-  },
-  onMutation (mutation, state, store) {
-    // chamado após todas mutações
-    // A mutação vem no formato { type, payload }
-  }
-}
-```
-
-E também pode ser utilizado assim:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  middlewares: [myMiddleware]
-})
-```
-
-Por padrão, um middleware recebe o objeto `state` real. Um middleware também pode receber o `armazém` (`store`) para disparar mutações. Como os middlewares são primariamente utilizados para debug da sua aplicação ou persistência de dados, eles **não podem modificar o estado**
-
-Algumas vezes um middleware pode querer receber <i>"snapshots"</i> do estado, e também comparar o estádo pós-mutação com o pré-mutação. Esses middlewares precisam declarar a opção `snapshot: true`:
-
-``` js
-const myMiddlewareWithSnapshot = {
-  snapshot: true,
-  onMutation (mutation, nextState, prevState, store) {
-    // nextState and prevState are deep-cloned snapshots
-    // of the state before and after the mutation.
-  }
-}
-```
-
-**Middlwares que fazem snapshots devem apenas serem utilizados durante desenvolvimento** Quando você estiver utilizando Webpack ou o Browserify, você pode deixar que essas ferramentas cuidem disso para você:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  middlewares: process.env.NODE_ENV !== 'production'
-    ? [myMiddlewareWithSnapshot]
-    : []
-})
-```
-
-O middleware será utilizado por padrão. Para produção, utilize a build descrita [aqui](http://vuejs.org/guide/application.html#Deploying_for_Production) para converter o valor de `process.env.NODE_ENV !== 'production'` para `false` na build final.
-### Middleware de Log Padrão
-
-O Vuex já vem com um middleware de log para o uso geral de debug:
-
-``` js
-import createLogger from 'vuex/logger'
-
-const store = new Vuex.Store({
-  middlewares: [createLogger()]
-})
-```
-
-A função `createLogger` recebe alguns parâmetros:
-
-``` js
-const logger = createLogger({
-  collapsed: false, // auto-expand logged mutations
-  transformer (state) {
-    // transform the state before logging it.
-    // for example return only a specific sub-tree
-    return state.subTree
-  },
-  mutationTransformer (mutation) {
-    // mutations are logged in the format of { type, payload }
-    // we can format it anyway we want.
-    return mutation.type
-  }
-})
-```
-
-Note que o middleware logger faz <i>snapshots</i> do estado, então utilize-o apenas para desenvolvimento.

+ 0 - 134
docs/pt/mutations.md

@@ -1,134 +0,0 @@
-# Mutações
-
-Mutações do Vuex são essenciamente eventos? cada mutação tem um **nome** e um **handler**. A função handler irá receber o estado como primeiro parâmetro:
-
-``` js
-import Vuex from 'vuex'
-
-const store = new Vuex.Store({
-  state: {
-    count: 1
-  },
-  mutations: {
-    INCREMENT (state) {
-      // mutate state
-      state.count++
-    }
-  }
-})
-```
-
-Utilizar apenas letras maiúsculas para nomes de mutações é apenas uma convenção para fazer com que seja mais fácil diferenciá-las de simples funções.
-
-Você não pode chamar diretamente um handler de mutação. As opções aqui são mais parecidas com um registro de um evento: "Quando um evento `INCREMENT` é disparado, chame esse handler". Para invocar um handler de uma mutação, você precisa disparar um evento de mutação:
-
-``` js
-store.dispatch('INCREMENT')
-```
-
-### Disparando Eventos com Argumentos
-
-Também é possível passar parâmetros para o handler:
-
-``` js
-// ...
-mutations: {
-  INCREMENT (state, n) {
-    state.count += n
-  }
-}
-```
-``` js
-store.dispatch('INCREMENT', 10)
-```
-
-Aqui o valor `10` será passado para o handler da mutação como o segundo arumento, já que o primeiro sempre será o `state`. O mesmo serve para qualquer parâmetro adicional. Esses parâmetros são chamados de **payload**.
-
-### Disparando no Estilo Objeto
-
-> necessita do vuex >=0.6.2
-
-Você também pode disparar mutações utilizando objetos:
-
-``` js
-store.dispatch({
-  type: 'INCREMENT',
-  payload: 10
-})
-```
-
-Note que ao utilizar o estilo objeto, você deve incluir todos os argumentos como propriedades no objeto despachado. O objeto inteiro será passado como o segundo parâmetro para os handlers das mutações:
-
-``` js
-mutations: {
-  INCREMENT (state, mutation) {
-    state.count += mutation.payload
-  }
-}
-```
-
-### Mutações seguem as regras de Reatividade do Vue.js
-
-Como um armazém de estado Vuex é feito reativo pelo Vue, quando nós mudamos o estado, os compoentes Vue que estão observando-o irão atualizar automaticamente. Isso também significa que as mutações do Vuex estão subjetivas para as mesmas regras e ressalvas de quando utilizamos apenas o Vue.js
-Since a Vuex store's state is made reactive by Vue, when we mutate the state, Vue components observing the state will update automatically. This also means Vuex mutations are subject to the same reactivity caveats when working with plain Vue:
-
-1. Prefira inicializar o estado inicial do seu armazém com todos os campos definidos previamente.
-
-2. Ao adicionar novas propriedades para um objeto, você deve seguir uma das duas opções abaixo:
-
-  - Utilize `Vue.set(obj, 'newProp', 123)`, ou -
-
-  - Substitua o objeto antigo por um novo. Por exemplo, utilizando o stage-2 [object spread syntax](https://github.com/sebmarkbage/ecmascript-rest-spread) nós poderíamos escrever assim:
-
-  ``` js
-  state.obj = { ...state.obj, newProp: 123 }
-  ```
-
-### Utilizando Constantes para nomes de Mutações
-
-Também é uma prática comum utilizar constantes para os nomes das mutações - elas irão permitir que o código tome vantagens de ferramentas como linters, e colocar todas as constantes em um único arquivo permite que seus colaboradores possam ter uma visualização geral de todas as mutações que são possíveis em sua aplicação:
-
-``` js
-// mutation-types.js
-export const SOME_MUTATION = 'SOME_MUTATION'
-```
-
-``` js
-// store.js
-import Vuex from 'vuex'
-import { SOME_MUTATION } from './mutation-types'
-
-const store = new Vuex.Store({
-  state: { ... },
-  actions: { ... },
-  mutations: {
-    // we can use the ES2015 computed property name feature
-    // to use a constant as the function name
-    [SOME_MUTATION] (state) {
-      // mutate state
-    }
-  }
-})
-```
-
-Whether to use constants is largely a preference - it can be helpful in large projects with many developers, but it's totally optional if you don't like them.
-
-### Mutações Precisam ser Síncronas
-
-Uma regra importante para se lembrar é que **o handler de uma mutação sempre deve ser síncrono**. Por que? Considere o exemplo a seguir:
-
-``` js
-mutations: {
-  SOME_MUTATION (state) {
-    api.callAsyncMethod(() => {
-      state.count++
-    })
-  }
-}
-```
-
-Agora imagine que nós estamos debugando o app e olhando nosso log de mutações. Para todas as mutações que estão no log, nós queremos compará-las com <i>snapshots</i> do estado *antes* e *depois* da mutação. Entretanto, os callbacks assíncronos dentro do exemplo de mutação acima faz com que isso seja impossível: o callback não é chamado quando a mutação é disparada, e nós não sabemos quando o callback será chamado de verdade. Qualquer mutação no estado que for realizada no callback é essencialmente irrastreável!
-
-### Ações
-
-Assincronidade combinada com mutações do estado podem fazer nossa aplicação ser de difícil compreensão. Por exemplo, quando você chama dois métodos, e ambos possuem callbacks assíncronos para modificar o estado, como você sabe qual método foi chamado e qual callback foi executado primeiro? É por isso que nós separamos os dois conceitos. Com o Vuex, nós realizamos todas as mutações no estado de forma síncrona. Nós iremos realizar qualquer ação assíncrona dentro de [Ações](actions.md).

+ 0 - 156
docs/pt/state.md

@@ -1,156 +0,0 @@
-# Estado and Getters
-
-### Árvore única de estado
-
-O Vuex utiliza uma **árvore única de estado** - ou seja, esse único objeto contém todo estado do nível de Aplicação e funciona como uma "fonté única de verdade". Isso também significa que você terá somente um armazém por aplicação. Uma única árvore de estado faz com seja simples localizar uma parte específica do seu estado, e nos permite facilmente tirar <i>snapshots</i> da aplicação para debugar.
-
-A árvore única de estado não é conflitante com o conceito de modularidade - nos próximos capítulos nós iremos discutir como separar o estado e as mutações em submódulos.
-
-### Recuperando Estado do Vuex em Componentes Vue
-
-Então como nós exibimos o estado do armazém em nossos componentes Vue? Já que os armazéns são reativos, a forma mais simples de "recupearar" o estado dele é simplesmente retornar o estado a partir de uma [computed property](http://vuejs.org/guide/computed.html):
-
-``` js
-// na definição de um componente Vue
-computed: {
-  count: function () {
-    return store.state.count
-  }
-}
-```
-
-A qualquer momento que o valor de `store.state.count` for modificado, ele irá obrigar a <i>computed property</i>, a se atualizar, e irá disparar as mudanças nos DOM's associados.
-
-Entretanto, esse padrão faz com que o componente esteja ligado com a instância única global do armazém. Isso faz com que seja mais difcíl para testar o componente, e também mais difícil para executar múltiplas instâncias do aplicativo utilizando o mesmo conjunto de componentes. Em aplicações maiores, nós provavelmente iremos preferir "injetar" o armazém em componentes filhos. Você pode fazer como no exeplo a seguir:
-
-1. Instale o Vuex e conecte seu componente raíz ao armazém:
-
-  ``` js
-  import Vue from 'vue'
-  import Vuex from 'vuex'
-  import store from './store'
-  import MyComponent from './MyComponent'
-
-  // important, teaches Vue components how to
-  // handle Vuex-related options
-  Vue.use(Vuex)
-
-  var app = new Vue({
-    el: '#app',
-    // provide the store using the "store" option.
-    // this will inject the store instance to all child components.
-    store,
-    components: {
-      MyComponent
-    }
-  })
-  ```
-
-  Ao informar a opção `store` para a instância principal, o armazém será injetado em todos os componentes filhos da instância principal e estará disponível neles a partir da opção `this.$store`. Entretando, dificilmente você terá que referenciá-lo.
-
-2. Dentro dos componentes filhos, recupere o estado utilizando funções **getter** na opção `vuex.getters`:
-
-  ``` js
-  // MyComponent.js
-  export default {
-    template: '...',
-    data () { ... },
-    // this is where we retrieve state from the store
-    vuex: {
-      getters: {
-        // a state getter function, which will
-        // bind `store.state.count` on the component as `this.count`
-        count: function (state) {
-          return state.count
-        }
-      }
-    }
-  }
-  ```
-
-  Note o bloco de opções especial chamado `vuex`. É aqui que nós especificamos qual estado o componente estará utilizando do armazem. Para cada propriedade, nós especificamos uma função <i>getter</i> que recebe a árvore de estados como argumento único, e então seleciona e retorna parte do estado, ou um valor computado derivado do estado. O resultado retornado será setado no componente utilizando uma propriedade nomeada, como uma computed property.
-
-  Em vários casos, a função "getter" pode ser bem sucinta utilizando as arrow functions do ES2015:
-
-  ``` js
-  vuex: {
-    getters: {
-      count: state => state.count
-    }
-  }
-  ```
-
-### Getters Devem ser puros
-
-Todos os getters Vuex devem ser [funções puras](https://en.wikipedia.org/wiki/Pure_function) - eles recebem toda a árove de estados, e retornam um valor baseado somente no estado. Isso faz com que elas sejam mais testáveis e eficientes. Isso também significa que **você não pode utilizar o `this` em getters**.
-
-Se você precisar acessar o `this`, por exemplo, para computar um estado derivado baseado no estado do componente local ou propriedades deles, você precisa definir computed properties separadas:
-
-``` js
-vuex: {
-  getters: {
-    currentId: state => state.currentId
-  }
-},
-computed: {
-  isCurrent () {
-    return this.id === this.currentId
-  }
-}
-```
-
-### Getters Podem retornar estado derivado
-
-No Vuex, Getters de estado na verdade são computed, e isso significa que você pode utilizá-los de forma reativa (e eficiente) como uma computed property. Por exemplo, vamos dizer que no estado nós possuímos um array de mensagens chamado `messages`, e um `currentThreadID` representando a conversa atual que o usuário está participando. Nós queremos exibir para o usuário uma listra de mensagens filtradas que são referentes a conversa atual:
-
-``` js
-vuex: {
-  getters: {
-    filteredMessages: state => {
-      return state.messages.filter(message => {
-        return message.threadID === state.currentThreadID
-      })
-    }
-  }
-}
-```
-
-Como as Computed properties do Vue js ficam em cache automaticamente e são apenas atualizadas quando uma dependência é modificada, você não precisa se preocupar com essa função sendo chamada em todas as mutações.
-
-### Compartilhando Getters em Múltiplos Componentes
-
-Como você pode ver, o getter `filteredMessages` pode ser útil dentro de vários componentes. Nesse caso, é uma boa ideia compartilhar essa função entre esses componentes:
-
-``` js
-// getters.js
-export function filteredMessages (state) {
-  return state.messages.filter(message => {
-    return message.threadID === state.currentThreadID
-  })
-}
-```
-
-``` js
-// in a component...
-import { filteredMessages } from './getters'
-
-export default {
-  vuex: {
-    getters: {
-      filteredMessages
-    }
-  }
-}
-```
-
-Como os getters são puros, getters compartilhados são colocados em cache de forma eficiente: quando as dependências mudam, eles só precisam se atualizar uma vez e todos os componentes terão o valor atualizado.
-
-> Referência Flux: Os getters do Vuex podem ser mais ou menos comparados com [`mapStateToProps`](https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) on Redux. Entretando, como eles utilizam o sistema do Vue.js para computed properties por trás das cortinas, eles são mais eficientes que o `mapStateToProps`, e mais similares ao [reselect](https://github.com/reactjs/reselect).
-
-### Componentes Não São Permitidos a Modificarem o Estado Diretamente
-
-É importante se lembrar que **componentes nunca devem modificar o estado do armazém Vuex diretamente**. Já que nós queremos que todas as mutações sejam explícitas e rastreáveis, todas as mutações de estado no Vuex devem ser conduzidas dentro dos handlers das mutações do armazém..
-
-Para ajudar a "obrigar" essa regra, quando você estiver com o [Strict Mode](strict.md) habilitado, se o estado do armazém é modificado fora dos handlers de mutação, o Vuex vai disparar um erro.
-
-Com essa regra ativa, nossos componentes Vue agora tem muito menos responsabilidades: eles estão ligados ao armazém de estado do Vuex com getters apenas de leitura, e a única maneira para eles modificarem o estado é de alguma forma disparando **mutações** (que nós vamos discutir mais tarde). Eles ainda podem conter e modificar seu estado local se necessário, mas nós não colocamos nenhuma lógica para buscar dados ou modificar o estado global dentro de componentes individuais. Eles agora estão centralizados nos arquivos relacionados ao Vuex, o que torna aplicações grandes e complexas fáceis de se entender e manter.

+ 0 - 25
docs/pt/strict.md

@@ -1,25 +0,0 @@
-# Strict Mode
-
-Para habilitar o modo Strict, simplesmente passe a opção `strict: true` ao criar um armazém Vuex:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  strict: true
-})
-```
-
-Com o modo strict habilitado, sempre que o estado do Vuex for mutado fora dos handlers de mutação, um erro será disparado. Isso nos garante que todas as mutações do estado possam ser explicitamente rastreada por ferramentas de debug.
-
-### Desenvolvimento vs. Produção
-
-**Não habilite o modo strict quando enviar seu app para produção!** O modo Strict utiliza um estado de ampla "visão" (deep watch) no seu código para garantir que nenhuma mutação inapropriada ocorra - tenha certeza de desabilitar o seu uso para produção para evitar que o seu uso faça com que seu app fique lento.
-
-Assim como os middlewares, nós podemos deixar com que as ferramentas de build do seu código lidem com isso:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  strict: process.env.NODE_ENV !== 'production'
-})
-```

+ 0 - 136
docs/pt/structure.md

@@ -1,136 +0,0 @@
-# Estrutura da Aplicação
-
-O Vuex não te restringe em como estruturar seu código. Em vez disso, ele impõe um conjunto de princípios de alto nível:
-
-1. O estado da aplicação é mantido no armazém, que é um único objeto.
-
-2. A única maneira de modificar o estado é disparando mutações no armazém.
-
-3. Mutações devem ser síncronas, e o único efeito colateral que elas devem produzir deve ser a mutação do estado.
-
-4. Nós podemos expor uma API de mutação do estado mais expressiva ao definir ações. Ações podem encapsular lógica assíncrona como carregamento de dados, e o único efeito colateral que elas devem produzir é disparar mutações.
-
-5. Componentes usam getters para recuperar estado do armazém, e chamar ações para modificar o estado.
-
-Um fato legal sobre mutações Vuex, ações e getters é que **eles são apenas funções**. Desde que você siga essas regras, você é quem decide como estruturar sua aplicação. Entretando, é bom termos algumas convenções, assim você se torna familiar a outros projetos que utilizem o Vuex. Abaixo você vê algumas opções dependendo do tamanho do seu aplicativo.
-
-### Projeto Simples
-
-Para um projeto simples, nós podemos simplesmente definir o **armazém** e as **ações** em seus respectivos arquivos:
-
-``` bash
-.
-├── index.html
-├── main.js
-├── components
-│   ├── App.vue
-│   └── ...
-└── vuex
-    ├── store.js     # exporta todo o armazém (com seu estado inicial e suas mutações)
-    └── actions.js   # exporta todas ações
-```
-
-Para um exemplo real, veja o exemplo do [Contador](https://github.com/vuejs/vuex/tree/master/examples/counter) ou o exemplo do [TodoMVC](https://github.com/vuejs/vuex/tree/master/examples/todomvc).
-
-Como alternativa, você pode separar as mutações para seu próprio arquivo.
-
-### De médio a grande porte
-
-Para um app não trivial, nós provavelmente queremos dividir o código relacionado ao Vuex em vários "módulos" (comparáveis a "stores" no Flux, e "reducers" no Redux), cada um lidando com uma parte específica da sua aplicação. Cada módulo estará gerenciando uma parte da árvore do estado da aplicação, exportando o estado inicial para aquela parte da aplicação e todas as mutações que são relativas a ela:
-
-``` bash
-├── index.html
-├── main.js
-├── api
-│   └── ... # abstrações para realizar requisições para a API
-├── components
-│   ├── App.vue
-│   └── ...
-└── vuex
-    ├── actions.js        # exporta todas ações
-    ├── store.js          # onde nós reunimos os módulos e exportamos o armazém
-    ├── mutation-types.js # constantes
-    └── modules
-        ├── cart.js       # estados e mutações para o carrinho
-        └── products.js   # estados e mutações para os produtos
-```
-
-Um módulo se parece com esse exemplo:
-
-``` js
-// vuex/modules/products.js
-import {
-  RECEIVE_PRODUCTS,
-  ADD_TO_CART
-} from '../mutation-types'
-
-// initial state
-const state = {
-  all: []
-}
-
-// mutações
-const mutations = {
-  [RECEIVE_PRODUCTS] (state, products) {
-    state.all = products
-  },
-
-  [ADD_TO_CART] (state, productId) {
-    state.all.find(p => p.id === productId).inventory--
-  }
-}
-
-export default {
-  state,
-  mutations
-}
-```
-
-E no arquivo `vuex/store.js`, nós "juntamos" vários módulos para criar a instância Vuex :
-
-``` js
-// vuex/store.js
-import Vue from 'vue'
-import Vuex from '../../../src'
-// importando partes de módulos
-import cart from './modules/cart'
-import products from './modules/products'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  // combinando submódulos
-  modules: {
-    cart,
-    products
-  }
-})
-```
-
-Aqui, o estado inicial para o módulo `cart` será anexado à arvore de estado como `store.state.cart`. Além disso, **todas as mutações definidades em um submódulo somente recebem a parte do estado da aplicação que está associada a elas**. Então mutações definidas no módulo `cart` irão receber `store.state.cart` como seu primeiro parâmetro.
-
-A raíz de uma subárvore de estado não é substituível dentro do próprio módulo. Por exemplo, o código abaixo não funcionaria:
-
-``` js
-const mutations = {
-  SOME_MUTATION (state) {
-    state = { ... }
-  }
-}
-```
-
-Ao invés disso, sempre armazene o estado atual como uma propriedade da raíz da subárvore:
-
-``` js
-const mutations = {
-  SOME_MUTATION (state) {
-    state.value = { ... }
-  }
-}
-```
-
-Como todos os módulos simplesmente exportam objetos e funções, eles são bem simples de testar e manter, e pode utilizar o hot-reload. Você também tem a liberdade de alterar os padrões utilizados aqui para encontrar a estrutura que se encaixe nas suas preferências.
-
-Note que nós não inserimos ações dentro de módulos, porque uma simples ação pode disparar mutações que afetem vários módulos. Também é uma boa ideia desacoplar as ações do seu estado e dos detalhes de implementação das mutações para uma melhor separação de conceitos. Se os arquivos das ações ficarem muito extensos, você pode criar uma pasta e dividir a implementação em pequenos arquivos individuais..
-
-Para um exemplo real, veja o [Exemplo de Carrinho de Compras](https://github.com/vuejs/vuex/tree/master/examples/shopping-cart).

+ 0 - 167
docs/pt/testing.md

@@ -1,167 +0,0 @@
- # Testes
-
-As partes principais que nós queremos testar no Vuex são as mutações e as ações.
-
-### Testando Mutações
-
-Mutações são muito fáceis de testar, porque elas são apenas funções que dependem apenas de seus parâmetros. Uma dica é que se você estiver utilizando módulos ES2015 e colocar suas mutações dentro do seu arquivo `store.js`, além dos dados que são exportados por padrão, você também pode exportar mutações nomeadas:
-
-``` js
-const state = { ... }
-
-// exportando as mutações com nomes
-export const mutations = { ... }
-
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-Exemplo de testes de mutação utilizando Mocha + Chai (você pode usar qualquer framework/bibliotecas de teste que você quiser):
-
-``` js
-// mutations.js
-export const INCREMENT = state => state.count++
-```
-
-``` js
-// mutations.spec.js
-import { expect } from 'chai'
-import { mutations } from './store'
-
-// destructure assign mutations
-const { INCREMENT } = mutations
-
-describe('mutations', () => {
-  it('INCREMENT', () => {
-    // mock state
-    const state = { count: 0 }
-    // apply mutation
-    INCREMENT(state)
-    // assert result
-    expect(state.count).to.equal(1)
-  })
-})
-```
-
-### Testando Ações
-
-Ações podem ser um pouco mais complicadas de testar porque talvez elas chamem APIs externas. Ao testar ações, nós geralmente precisamos realizar algum tipo de mocking - por exemplo, nós podemos abstrair as chamadas da api em um serviço e usar um mock para esse serviço em nossos testes. Para facilitar esse processo, você pode utizar o Webpack em conjunto com o [inject-loader](https://github.com/plasticine/inject-loader) para empacotar os arquivos de testes.
-
-Exemplo de teste com uma ação assíncrona:
-
-``` js
-// actions.js
-import shop from '../api/shop'
-
-export const getAllProducts = ({ dispatch }) => {
-  dispatch('REQUEST_PRODUCTS')
-  shop.getProducts(products => {
-    dispatch('RECEIVE_PRODUCTS', products)
-  })
-}
-```
-
-``` js
-// actions.spec.js
-
-// use require syntax for inline loaders.
-// with inject-loader, this returns a module factory
-// that allows us to inject mocked dependencies.
-import { expect } from 'chai'
-const actionsInjector = require('inject!./actions')
-
-// create the module with our mocks
-const actions = actionsInjector({
-  '../api/shop': {
-    getProducts (cb) {
-      setTimeout(() => {
-        cb([ /* mocked response */ ])
-      }, 100)
-    }
-  }
-})
-
-// helper for testing action with expected mutations
-const testAction = (action, args, state, expectedMutations, done) => {
-  let count = 0
-  // mock dispatch
-  const dispatch = (name, ...payload) => {
-    const mutation = expectedMutations[count]
-    expect(mutation.name).to.equal(name)
-    if (payload) {
-      expect(mutation.payload).to.deep.equal(payload)
-    }
-    count++
-    if (count >= expectedMutations.length) {
-      done()
-    }
-  }
-  // call the action with mocked store and arguments
-  action({dispatch, state}, ...args)
-
-  // check if no mutations should have been dispatched
-  if (expectedMutations.length === 0) {
-    expect(count).to.equal(0)
-    done()
-  }
-}
-
-describe('actions', () => {
-  it('getAllProducts', done => {
-    testAction(actions.getAllProducts, [], {}, [
-      { name: 'REQUEST_PRODUCTS' },
-      { name: 'RECEIVE_PRODUCTS', payload: [ /* mocked response */ ] }
-    ], done)
-  })
-})
-```
-
-### Rodando os Testes
-
-Se suas mutações e ações forem escritas corretamente, os testes não devem ter nenhuma dependÊncia direta nas APIs dos navegadores após o mocking bem realizado. Assim, você pode simplesmente agrupar os testes com Webpack e executá-lo diretamente no Node. Alternativamente, você pode utilizar o `mocha-loader` ou o Karma + `karma-webpack` para rodar os testes em um navegador real.
-
-#### Testando no Node
-
-Crie a seguinte configuração no webpack:
-
-``` js
-module.exports = {
-  entry: './test.js',
-  output: {
-    path: __dirname,
-    filename: 'test-bundle.js'
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        loader: 'babel',
-        exclude: /node_modules/
-      }
-    ]
-  },
-  babel: {
-    presets: ['es2015']
-  }
-}
-```
-
-Então:
-
-``` bash
-webpack
-mocha test-bundle.js
-```
-
-#### Testando no Navegador
-
-1. Instale o `mocha-loader`
-2. Mude o valor da opção `entry` na configuração acima do Webpack para `'mocha!babel!./test.js'`.
-3. Inicie o `webpack-dev-server` usando a configuração
-4. Va até o endereço `localhost:8080/webpack-dev-server/test-bundle`.
-
-#### Testando no Navegador com Karma + karma-webpack
-
-Consulte o setup na [documentação do vue-loader](http://vuejs.github.io/vue-loader/workflow/testing.html).

+ 0 - 266
docs/pt/tutorial.md

@@ -1,266 +0,0 @@
-# Tutorial
-
- Vamos criar um app bem simples utilizando o Vuex para entender como utilizá-lo. Para esse exemplo, nós iremos construir um aplicativo onde você pressiona um botão, e ele incrementa um contador.
-
-![Resultado Final](tutorial/result.png)
-
-Nós estaremos utilizando esse simples exemplo para explicar os conceitos, e os problemas que o vuex tenta resolver - como gerenciar um aplicativo complexo que utiliza vários componentes. Considere que esse exemplo utiliza três componentes:
-
-### `components/App.vue`
-
-O elemento raíz, que contém outros dois componentes filhos:
-
-* `Display` para exibir o valor atual do contador.
-* `Increment` que é um botão para incrementar o valor atual.
-
-```html
-<template>
-  <div>
-    <Display></Display>
-    <Increment></Increment>
-  </div>
-</template>
-
-<script>
-
-import Display from './Display.vue'
-import Increment from './Increment.vue'
-
-export default {
-  components: {
-    Display: Display,
-    Increment: Increment
-  }
-}
-</script>
-```
-
-### `components/Display.vue`
-
-```html
-<template>
-  <div>
-    <h3>Count is 0</h3>
-  </div>
-</template>
-
-<script>
-export default {
-}
-</script>
-```
-
-### `components/Increment.vue`
-
-```html
-<template>
-  <div>
-    <button>Increment +1</button>
-  </div>
-</template>
-
-<script>
-export default {
-}
-</script>
-```
-
-### Desafios sem o vuex
-
-* `Increment` e `Display` não sabem da existência um do outro, e não podem passar mensagens entre si.
-* `App` terá que utilizar <i>events</i> e <i>broadcasts</i> para coordenar os dois componentes.
-* Já que o `App` é quem coordena os outros componentes, eles não são reutilizáveis e são muito acoplados. Reestruturar o aplicativo pode quebrá-lo.
-
-### "Fluxo" Vuex
-
-Esses são os passos que serão utilizados:
-
-![Vuex Flow](tutorial/vuex_flow.png)
-
-Isso pode ser um pouco demais para incrementar um contador. Mas note que esses conceitos irão funcionar muito bem em aplicações maiores, melhorando a manutenabilidade e fazendo seu aplicativo mais fácil de debugar e vai te ajudar a manter ele por mais tempo. Então, vamos modificar nosso código para utilizar o Vuex.
-
-### Passo 1: Adicione um Armazém
-
-O armazém mantém os dados do aplicativo. Todos os componentes utilizam os dados do armazém. Antes de começarmos, instale o Vuex via npm:
-
-```
-$ npm install --save vuex
-```
-
-Crie um novo arquivo em `vuex/store.js`
-
-```js
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-// Indique o Vue a utilizar o Vuex
-Vue.use(Vuex)
-
-// Nós criamos um objeto para armazenar o valor inicial do estado
-// quando o aplicativo for iniciado
-const state = {
-  // TODO: Adicionar o estado inicial
-}
-
-// Crie um objeto para armazenar nossas mutações.
-const mutations = {
-  // TODO: adicionar as mutações
-}
-
-// Vamos combinar o estado inicial com as mutações para criar um armazém Vuex
-// Esse armazém pode ser vinculado ao aplicativo
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-Nós precisamos informar ao nosso aplicativo sobre esse armazém. Para fazer isso nós simplesmente precisamos alterar nosso componente principal.
-
-Edite o arquivo `components/App.vue` e adicione o armazém.
-
-```js
-import Display from './Display.vue'
-import Increment from './IncrementButton.vue'
-import store from '../vuex/store' // importe o armazém que acabamos de criar
-
-export default {
-  components: {
-    Display: Display,
-    Increment: Increment
-  },
-  store: store // Adicionando essa linha todos os componentes filhos saberão da existência do armazém
-}
-```
-
-> **Dica**: Com ES6 e Babel você pode utilizar da seguinte maneira:
->
->     components: {
->       Display,
->       Increment,
->     },
->     store
-
-### Passo 2: Crie as ações
-
-A ação é uma função que é chamada no componente. Funções de ação pode disparar atualizações no armazém ao disparar a mutação correta. Uma ação também pode fazer requisições HTTP e ler outros dados do armazém antes de disparar atualizações.
-
-Crie um novo arquivo em `vuex/actions.js` com uma simples função chamada `incrementCounter`
-
-```js
-// Uma ação irá receber um armazém como seu primeiro argumento
-// Já que estamos apenas interessados em disparar uma mutação
-// Nós podemos importar os dois parâmetros utilizando a habilidade de <i>destructuring</i> do ES6
-export const incrementCounter = function ({ dispatch, state }) {
-  dispatch('INCREMENT', 1)
-}
-```
-
-E vamos chamar a ação no nosso componente `components/Increment.vue`.
-
-```
-<template>
-  <div>
-    <button @click='increment'>Increment +1</button>
-  </div>
-</template>
-
-<script>
-import { incrementCounter } from '../vuex/actions'
-export default {
-  vuex: {
-    actions: {
-      increment: incrementCounter
-    }
-  }
-}
-</script>
-```
-
-Note algumas coisas interessantes que acabamos de adicionar:
-
-1. Nós temos um novo objeto chamado `vuex.actions` que inclui a nova ação
-2. Nós não especificamos qual armazém, objeto, estado e etc. O Vuex configura tudo por nós.
-3. Nós podemos chamar a ação chamando `this.increment()` em qualquer método.
-4. Nós podemos também chamar a ação utilizando passando de parâmetro a um evento `@click`, fazendo com que a ação `increment` atue como qualquer outro método Vue.
-5. A ação é chamada `incrementCounter`, mas nós podemos utilizar o nome que acharmos mais apropriado.
-
-### Passo 3: Configure o estado e a mutação
-
-No nosso arquivo `vuex/actions.js` nós disparamos uma mutação `INCREMENT` mas nós ainda não escrevemos como lidar com isso. Então vamos fazer isso agora.
-
-Edite o arquivo `vuex/store.js`
-
-```js
-const state = {
-  // Quando o aplicativo iniciar, o valor de count será 0
-  count: 0
-}
-
-const mutations = {
-  // Uma mutação recebe o estado atual como primeiro parâmetro
-  // Você pode fazer qualquer modificação dentro desse método
-  INCREMENT (state, amount) {
-    state.count = state.count + amount
-  }
-}
-```
-
-### Passo 4: Adicione o valor ao componente
-
-Crie um novo arquivo chamado `vuex/getters.js`
-
-```js
-// Esse getter é uma função que simplesmente retorna o valor do contador
-// Com o ES6 você pode escrever assim:
-// export const getCount = state => state.count
-
-export function getCount (state) {
-  return state.count
-}
-```
-
-Essa função retorna parte do objeto de estado que nos interessa - o valor atual do contador. Nós podemos utilizar esse getter dentro do componente.
-
-Edite o arquivo `components/Display.vue`
-
-```html
-<template>
-  <div>
-    <h3>Count is {{ counterValue }}</h3>
-  </div>
-</template>
-
-<script>
-import { getCount } from '../vuex/getters'
-export default {
-  vuex: {
-    getters: {
-      // note que você está passando uma função, e não o valor 'getCount()'
-      counterValue: getCount
-    }
-  }
-}
-</script>
-```
-
-Existe um novo objeto chamado `vuex.getters` que requisita a função `counterValue` para ser vinculada ao getter `getCount`. Nós escolhemos diferentes nomes para mostrar que você pode escolher o nome que fizer sentido ao contexto do seu componente, não necessariamente o nome do getter.
-
-Você deve estar se perguntando - por que nós escolhemos utilizar um getter ao invés de acessar diretamente o valor do estado. Esse conceito é mais uma boa prática, e é mais aplicável a uma aplicação mais complexa, e apresenta algumas vantagens:
-
-1. Nós podemos querer definir getters com valores computados (pense em totais, médias, etc.).
-2. Muitos componentes em um aplicativo mais complexo utilizam o mesmo getter.
-3. Se o valor for modificado, vamos dizer de `store.count` para `store.counter.value` você só precisa atualizar um getter ao invés de vários arquivos.
-
-Esses são apenas alguns dos benefícios de utilizar os getters.
-
-### Passo 5: Próximos Passos
-
-Se você rodar a aplicação, agora você verá ela funcionando como deveria.
-
-Para aumentar seu entendimento sobre o Vuex, você pode tentar implementar as seguintes modificações ao app, como um exercício.
-
-* Adicione um botão de decremento.
-* Instale o [Devtools do VueJS](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en) e explore as ferramentas do Vuex e observe as mutações sendo aplicadas.
-* Adicione um input do tipo texto em outro componente chamado `IncrementAmount` e entre com um valor para incrementar o contador. Isso pode ser um pouco diferente, já que os forms no Vuex funcionam de uma forma diferente. Leia o arquivo [Manipulações de Formulários](forms.md) para mais detalhes.
-

二进制
docs/pt/tutorial/result.png


二进制
docs/pt/tutorial/vuex_flow.png


二进制
docs/pt/vuex.png


+ 0 - 1
docs/zh-cn/README.md

@@ -1 +0,0 @@
-SUMMARY.md

+ 0 - 20
docs/zh-cn/SUMMARY.md

@@ -1,20 +0,0 @@
-# 目录
-
-> 注意:中文版文档更新可能滞后,最新版本的文档请看英文版。  
-> 请确保按顺序阅读
-
-- [什么是 Vuex?](intro.md)
-- [准备开始](getting-started.md)
-- [简易教程](tutorial.md)
-- 核心概念
-  - [State 和 Getters](state.md)
-  - [Mutations(状态变更)](mutations.md)
-  - [Actions](actions.md)
-- [数据流](data-flow.md)
-- [应用结构](structure.md)
-- [中间件](middlewares.md)
-- [严格模式](strict.md)
-- [表单处理](forms.md)
-- [测试](testing.md)
-- [热重载](hot-reload.md)
-- [API 参考文档](api.md)

+ 0 - 199
docs/zh-cn/actions.md

@@ -1,199 +0,0 @@
-# Actions
-
-> Vuex actions 和 Flux 中的 "action creators" 是等同的概念,但是我觉得这个定义常让人感到困惑(比如分不清 actions 和 action creators)。
-
-Actions 是用于分发 mutations 的函数。按照惯例,Vuex actions 的第一个参数是 store 实例,附加上可选的自定义参数。
-
-``` js
-// 最简单的 action
-function increment (store) {
-  store.dispatch('INCREMENT')
-}
-
-// 带附加参数的 action
-// 使用 ES2015 参数解构
-function incrementBy ({ dispatch }, amount) {
-  dispatch('INCREMENT', amount)
-}
-```
-
-乍一眼看上去感觉多此一举,我们直接分发 mutations 岂不更方便?实际上并非如此,还记得 **mutations 必须同步执行**这个限制么?Actions 就不受约束!我们可以在 action 内部执行**异步**操作:
-
-``` js
-function incrementAsync ({ dispatch }) {
-  setTimeout(() => {
-    dispatch('INCREMENT')
-  }, 1000)
-}
-```
-
-来看一个更加实际的购物车示例,涉及到**调用异步 API** 和 **分发多重 mutations**:
-
-
-``` js
-function checkout ({ dispatch, state }, products) {
-  // 把当前购物车的物品备份起来
-  const savedCartItems = [...state.cart.added]
-  // 发出检出请求,然后乐观地清空购物车
-  dispatch(types.CHECKOUT_REQUEST)
-  // 购物 API 接受一个成功回调和一个失败回调
-  shop.buyProducts(
-    products,
-    // 成功操作
-    () => dispatch(types.CHECKOUT_SUCCESS),
-    // 失败操作
-    () => dispatch(types.CHECKOUT_FAILURE, savedCartItems)
-  )
-}
-```
-
-请谨记一点,必须通过分发 mutations 来处理调用异步 API 的结果,而不是依赖返回值或者是传递回调来处理结果。基本原则就是:**Actions 除了分发 mutations 应当尽量避免其他副作用**。
-
-### 在组件中调用 Actions
-
-你可能发现了 action 函数必须依赖 store 实例才能执行。从技术上讲,我们可以在组件的方法内部调用 `action(this.$store)` 来触发一个 action,但这样写起来有失优雅。更好的做法是把 action 暴露到组件的方法中,便可以直接在模板中引用它。我们可以使用 `vuex.actions` 选项来这么做:
-
-``` js
-// 组件内部
-import { incrementBy } from './actions'
-
-const vm = new Vue({
-  vuex: {
-    getters: { ... }, // state getters
-    actions: {
-      incrementBy // ES6 同名对象字面量缩写
-    }
-  }
-})
-```
-
-上述代码所做的就是把原生的 `incrementBy` action 绑定到组件的 store 实例中,暴露给组件一个 `vm.increamentBy` 实例方法。所有传递给 `vm.increamentBy` 的参数变量都会排列在 store 变量后面然后一起传递给原生的 action 函数,所以调用:
-
-``` js
-vm.incrementBy(1)
-```
-
-等价于:
-
-``` js
-incrementBy(vm.$store, 1)
-```
-
-虽然多写了一些代码,但是组件的模板中调用 action 更加省力了:
-
-``` html
-<button v-on:click="incrementBy(1)">increment by one</button>
-```
-
-还可以给 action 取别名:
-
-``` js
-// 组件内部
-import { incrementBy } from './actions'
-
-const vm = new Vue({
-  vuex: {
-    getters: { ... },
-    actions: {
-      plus: incrementBy // 取别名
-    }
-  }
-})
-```
-
-这样 action 就会被绑定为 `vm.plus` 而不是 `vm.increamentBy` 了。
-
-### 内联 Actions
-
-如果一个 action 只跟一个组件相关,可以采用简写语法把它定义成一行:
-
-``` js
-const vm = new Vue({
-  vuex: {
-    getters: { ... },
-    actions: {
-      plus: ({ dispatch }) => dispatch('INCREMENT')
-    }
-  }
-})
-```
-
-### 绑定所有 Actions
-
-如果你想简单地把所有引入的 actions 都绑定到组件中:
-
-``` js
-import * as actions from './actions'
-
-const vm = new Vue({
-  vuex: {
-    getters: { ... },
-    actions // 绑定所有 actions
-  }
-})
-```
-
-### 管理多模块 Actions
-
-通常在大型 App 中,action 应该按不同目的进行 分组 / 模块化 管理,例如,userActions 模块用于处理用户注册、登录、注销,而 shoppingCartActions 处理购物任务。
-
-当想要在不同组件中仅引入必需的 action 时,模块化使之更为方便。
-
-你还可以在 action 模块中引入其他 action 模块来实现复用。
-
-```javascript
-// errorActions.js
-export const setError = ({dispatch}, error) => {
-  dispatch('SET_ERROR', error)
-}
-export const showError = ({dispatch}) => {
-  dispatch('SET_ERROR_VISIBLE', true)
-}
-export const hideError = ({dispatch}) => {
-  dispatch('SET_ERROR_VISIBLE', false)
-}
-```
-
-```javascript
-// userActions.js
-import {setError, showError} from './errorActions'
-
-export const login = ({dispatch}, username, password) => {
-  if (username && password) {
-    doLogin(username, password).done(res => {
-      dispatch('SET_USERNAME', res.username)
-      dispatch('SET_LOGGED_IN', true)
-      dispatch('SET_USER_INFO', res)
-    }).fail(error => {
-      dispatch('SET_INVALID_LOGIN')
-      setError({dispatch}, error)
-      showError({dispatch})
-    })
-  }
-}
-
-```
-
-当从一个模块中调用另一个模块的 action 时,或者调用同一模块中的另一个 action 时,切记,action 的第一个参数是 store 实例,因此应该将调用者 action 的第一个参数传递给被调用 action。
-
-如果你使用 ES6 的解构形式来编写 action,确保调用者 action 的第一个参数包含两个 action 中用到的所有属性和方法。举例说明,调用者 action 仅使用 *dispatch* 方法,而被调用 action 使用了 *state* 属性和 *watch* 方法,那么,*dispatch*、*state* 和 *watch* 应该都出现在传递给调用者 action 的第一个形式参数中,示例如下:
-
-```javascript
-import {callee} from './anotherActionModule'
-
-export const caller = ({dispatch, state, watch}) => {
-  dispatch('MUTATION_1')
-  callee({state, watch})
-}
-```
-
-或者,你也可以使用老式的函数语法:
-
-```javascript
-import {callee} from './anotherActionModule'
-
-export const caller = (store) => {
-  store.dispatch('MUTATION_1')
-  callee(store)
-}
-```

+ 0 - 94
docs/zh-cn/api.md

@@ -1,94 +0,0 @@
-# API
-
-### Vuex.Store
-
-``` js
-import Vuex from 'vuex'
-
-const store = new Vuex.Store({ ...options })
-```
-
-### Vuex.Store 构造器选项
-
-- **state**
-
-  - type: `Object`
-
-    Vuex store 实例的根 state 对象。
-
-    [详细](state.md)
-
-- **mutations**
-
-  - type: `Object`
-
-    一个以 mutation 名为 key, mutation handler 为 value 的对象。Handler function 永远接受 `state` 为第一个参数,后面紧跟着所有调用 dispatch 时传入的参数。
-
-    [详细](mutations.md)
-
-- **modules**
-
-  - type: `Object`
-
-    一个会被合并到 store 中包含子模块的对象,形如:
-
-    ``` js
-    {
-      key: {
-        state,
-        mutations
-      },
-      ...
-    }
-    ```
-
-    每个模块都可以包含与根选项类似的 `state` 和 `mutations`。模块的状态会被以模块的 key 附加到 Vuex 实例的根状态中。模块的 mutations 只接受此模块的状态作为第一个参数而不是整个根状态。
-
-- **middlewares**
-
-  - type: `Array<Object>`
-
-    中间件对象的数组,形如:
-
-    ``` js
-    {
-      snapshot: Boolean, // default: false
-      onInit: Function,
-      onMutation: Function
-    }
-    ```
-
-    所有字段都是可选的。[详细](middlewares.md)
-
-- **strict**
-
-  - type: `Boolean`
-  - default: `false`
-
-    强制 Vuex store 实例进入严格模式。在严格模式中任何在 mutation handler 外部对该 store 的 state 做出的修改均会抛出异常。
-
-    [详细](strict.md)
-
-### Vuex.Store 实例属性
-
-- **state**
-
-  - type: `Object`
-
-    根 state,只读。
-
-### Vuex.Store 实例方法
-
-- **dispatch(mutationName: String, ...args)**
-
-  直接触发一个 mutation。在一些特殊情况下会需要用到这个方法,但通常来说,在组件中应当尽量通过调用 actions 来触发 mutation。
-
-- **watch(pathOrGetter: String|Function, cb: Function, [options: Object])**
-
-  监听一个 path 或 getter 的值,当值发生改变时触发回调。接受与 `vm.$watch` 方法相同的配置选项作为可选参数。
-
-  执行返回的 handle function 结束监听。
-
-- **hotUpdate(newOptions: Object)**
-
-  热更新 actions 和 mutations。[详细](hot-reload.md)

+ 0 - 1
docs/zh-cn/book.json

@@ -1 +0,0 @@
-../book.json

+ 0 - 88
docs/zh-cn/data-flow.md

@@ -1,88 +0,0 @@
-# 数据流
-
-为了更好地理解 Vuex app 中的数据流,我们来开发一个简单的计数器 app。注意:这个例子仅仅是为了更好地解释概念,在实际情况中并不需要在这种简单的场合使用 Vuex.
-
-### Store
-
-``` js
-// store.js
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-Vue.use(Vuex)
-
-// 应用初始状态
-const state = {
-  count: 0
-}
-
-// 定义所需的 mutations
-const mutations = {
-  INCREMENT (state) {
-    state.count++
-  },
-  DECREMENT (state) {
-    state.count--
-  }
-}
-
-// 创建 store 实例
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-### Actions
-
-``` js
-// actions.js
-export const increment = ({ dispatch }) => dispatch('INCREMENT')
-export const decrement = ({ dispatch }) => dispatch('DECREMENT')
-```
-
-### 在 Vue 组件里使用
-
-**模板**
-
-``` html
-<div>
-  Clicked: {{ count }} times
-  <button v-on:click="increment">+</button>
-  <button v-on:click="decrement">-</button>
-</div>
-```
-
-**代码**
-
-``` js
-// 仅需要在根组件中注入 store 实例一次即可
-import store from './store'
-import { increment, decrement } from './actions'
-
-const app = new Vue({
-  el: '#app',
-  store,
-  vuex: {
-    getters: {
-      count: state => state.count
-    },
-    actions: {
-      increment,
-      decrement
-    }
-  }
-})
-```
-
-你会注意到组件本身非常简单:它所做的仅仅是绑定到 state、然后在用户输入时调用 actions。
-
-你也会发现整个应用的数据流是单向的,正如 Flux 最初所定义的那样:
-
-1. 用户在组件中的输入操作触发 action 调用;
-2. Actions 通过分发 mutations 来修改 store 实例的状态;
-3. Store 实例的状态变化反过来又通过 getters 被组件获知。
-
-<p align="center">
-  <img width="700px" src="vuex.png">
-</p>

+ 0 - 67
docs/zh-cn/forms.md

@@ -1,67 +0,0 @@
-# 表单处理
-
-当在严格模式中使用 Vuex 时,在属于 Vuex 的 state 上使用 `v-model` 会比较棘手:
-
-``` html
-<input v-model="obj.message">
-```
-
-假设这里的 `obj` 是在计算属性中返回的一个属于 Vuex store 的对象,在用户输入时,`v-model` 会试图直接修改 `obj.message`。在严格模式中,由于这个修改不是在 mutation handler 中执行的, 这里会抛出一个错误。
-
-用『Vuex 的思维』去解决这个问题的方法是:给 `<input>` 中绑定 value,然后侦听 `input` 或者 `change` 事件,在事件回调中调用 action:
-
-``` html
-<input :value="obj.message" @input="updateMessage">
-```
-``` js
-// ...
-methods: {
-  updateMessage: function (e) {
-    vuex.actions.updateMessage(e.target.value)
-  }
-}
-```
-
-我们假设 `updateMessage` action 会 dispatch `'UPDATE_MESSAGE'`, 下面是 mutation handler:
-
-``` js
-// ...
-mutations: {
-  UPDATE_MESSAGE (state, message) {
-    state.obj.message = message
-  }
-}
-```
-
-必须承认,这样做比简单地使用 `v-model` 要啰嗦得多,但这换来的是 state 的改变更加清晰和可被跟踪。另一方面,Vuex **并不**强制要求所有的状态都必须放在 Vuex store 中 —— 如果有些状态你觉得并没有需要对其变化进行追踪,那么你完全可以把它放在 Vuex 外面(比如作为组件的本地状态),这样就可以愉快地使用 `v-model` 了。
-
-此外,如果仍然希望使用 Vuex 管理跟踪状态,并愉快地使用 `v-model`,还可以在组件中使用带 setter 的计算属性,这样,你就可以使用诸如 lazy、number 和 debounce 这样的参数特性了。
-
-``` html
-<input v-model="thisMessage">
-```
-``` js
-// ...
-vuex: {
-  getters: {
-    message: state => state.obj.message
-  },
-  actions: {
-    updateMessage: ({ dispatch }, value) => {
-      dispatch('UPDATE_MESSAGE', value)
-    }
-  }
-},
-computed: {
-  thisMessage: {
-    get () {
-      return this.message
-    },
-    set (val) {
-      this.updateMessage(val)
-    }
-  }
-}
-```
-
-mutation 保持不变。

+ 0 - 53
docs/zh-cn/getting-started.md

@@ -1,53 +0,0 @@
-# 准备开始
-
-每一个 Vuex 应用的核心就是 **store**(仓库)。"store" 基本上就是一个容器,它包含着你应用里大部分的 **状态**(即 **state**). Vuex 和单纯的全局对象有以下两点不同:
-
-1. Vuex 的状态存储是响应式的. 当 Vue 组件从 store 中读取状态的时候, 若 store 中的状态发生变化,那么相应的组件也会相应地高效地得到更新.
-
-2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地分发 **状态变更事件**(explicitly dispatching **mutations**)。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
-
-### 最简单的 store
-
-> **注意**:我们将会在后续的文档中用 ES2015 语法进行案例展示。如果你还没能掌握 ES2015,[你得抓紧了](https://babeljs.io/docs/learn-es2015/)!本文同样假设你已经了解了 Vue 本体的官方文档中[构建大型应用](http://vuejs.org.cn/guide/application.html)章节所涉及的概念.
-
-创建 Vuex store 的过程相当直截了当 - 只要提供一个初始化的 state 对象,以及一些 mutations:
-
-``` js
-import Vuex from 'vuex'
-
-const state = {
-  count: 0
-}
-
-const mutations = {
-  INCREMENT (state) {
-    state.count++
-  }
-}
-
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-现在,你可以通过 `store.state` 来读取 `state` 对象,还可以通过 dispatch 某 mutation 的名字来触发这些状态变更:
-
-``` js
-store.dispatch('INCREMENT')
-
-console.log(store.state.count) // -> 1
-```
-
-如果你倾向于对象风格的分发方式,你可以用这种语法:
-
-``` js
-// 效果同上
-store.dispatch({
-  type: 'INCREMENT'
-})
-```
-
-再次强调,我们通过分发 mutation 的方式,而非直接改变 `store.state.count`,是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显,这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外,这样也让我们有机会去实现一些能记录每次状态改变,保存状态快照的调试工具。有了它,我们甚至可以实现如时间穿梭般的调试体验。
-
-以上只是一个用来展示 store 究竟是什么的一个极简例子。但是 Vuex 可不仅仅是状态存储。接下来,我们将会更深入地探讨一些核心概念:[State(状态)](state.md),[Mutations(变更)](mutations.md) 和 [Actions(动作)](actions.md)。

+ 0 - 29
docs/zh-cn/hot-reload.md

@@ -1,29 +0,0 @@
-# 热重载
-
-Vuex 支持在开发中热重载 actions 和 mutations(使用 Webpack 的 [Hot Module Replacement API](https://webpack.github.io/docs/hot-module-replacement.html))。你也可以在 Browserify 里使用 [browserify-hmr](https://github.com/AgentME/browserify-hmr/) 插件来实现同样的功能。
-
-只需要简单地调用 `store.hotUpdate()`:
-
-``` js
-// ...
-const store = new Vuex.Store({
-  state,
-  actions,
-  mutations
-})
-
-if (module.hot) {
-  // 使 actions 和 mutations 成为可热重载模块
-  module.hot.accept(['./actions', './mutations'], () => {
-    // 获取更新后的模块
-    // 因为 babel 6 的模块编译格式问题,这里需要加上 .default
-    const newActions = require('./actions').default
-    const newMutations = require('./mutations').default
-    // 加载新模块 
-    store.hotUpdate({
-      actions: newActions,
-      mutations: newMutations
-    })
-  })
-}
-```

+ 0 - 13
docs/zh-cn/intro.md

@@ -1,13 +0,0 @@
-## 什么是 Vuex?
-
-Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构。它借鉴了 [Flux](https://facebook.github.io/flux/) 和 [Redux](https://github.com/rackt/redux) 的设计思想,但简化了概念,并且采用了一种为能更好发挥 Vue.js 数据响应机制而专门设计的实现。
-
-## 我为什么需要它?
-
-当你的应用还很简单的时候,你多半并不需要 Vuex。也不建议过早地使用 Vuex。但如果你正在构建一个中型以上规模的 SPA,你很有可能已经需要思考应该如何更好地归纳 Vue 之外,应用的其他组成部分。这就是 Vuex 要大显身手的时刻。
-
-我们在单独使用 Vue.js 的时候,通常会把状态储存在组件的内部。也就是说,每一个组件都拥有当前应用状态的一部分,整个应用的状态是分散在各个角落的。然而我们经常会需要把状态的一部分共享给多个组件。一个常见的解决策略为:使用定制的事件系统,让一个组件把一些状态“*发送*”到其他组件中。这种模式的问题在于,大型组件树中的事件流会很快变得非常繁杂,并且调试时很难去找出究竟哪错了。
-
-为了更好的解决在大型应用中状态的共用问题,我们需要对组件的 **组件本地状态**(component local state) 和 **应用层级状态**(application level state) 进行区分。应用级的状态不属于任何特定的组件,但每一个组件仍然可以监视(Observe)其变化从而响应式地更新 DOM。通过汇总应用的状态管理于一处,我们就不必到处传递事件。因为任何牵扯到一个以上组件的逻辑,都应该写在这里。此外,这样做也能让我们更容易地记录并观察状态的变更(Mutation,原意为突变),甚至可以实现出华丽如时光旅行一般的调试效果。(译注:是时候安利一波 [vue-devtools](https://github.com/vuejs/vue-devtools) 了)
-
-Vuex 也对如何管理分撒各地的状态增加了一些约束,但仍保留有足够面对真实使用场景的灵活性。

+ 0 - 81
docs/zh-cn/middlewares.md

@@ -1,81 +0,0 @@
-# 中间件
-
-Vuex store 可以接受 `middlewares` 选项来加载中间件。中间件在每一个 mutation 被触发后会调用响应的勾子函数(注意这和 Redux 的中间件概念完全没有关系)。一个 Vuex 中间件即是一个包含一些勾子函数的简单对象:
-
-``` js
-const myMiddleware = {
-  onInit (state) {
-    // 记录初始 state
-  },
-  onMutation (mutation, state) {
-    // 每个 mutation 后会被调用
-    // mutation 参数的格式为 { type, payload }
-  }
-}
-```
-
-使用方式如下:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  middlewares: [myMiddleware]
-})
-```
-
-一个中间件默认会接受到原本的 `state` 对象,但中间件通常用于 debugging 或是数据持久化, 它们是 **不允许改变 state 的。**
-
-有时候我们可能会想要在中间件中获得 state 的快照(snapshots),用来比较 mutation 前后的 state。这样的中间件必须定义 `snapshot: true` 选项:
-
-``` js
-const myMiddlewareWithSnapshot = {
-  snapshot: true,
-  onMutation (mutation, nextState, prevState) {
-    // nextState 和 prevState 分别为 mutation 触发前
-    // 和触发后对原 state 对象的深拷贝
-  }
-}
-```
-
-**可以获得快照的中间件只应在开发环境下使用**。使用 Webpack 或 Browserify 时,我们可以让工具来帮我们处理这个问题:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  middlewares: process.env.NODE_ENV !== 'production'
-    ? [myMiddlewareWithSnapshot]
-    : []
-})
-```
-
-在开发环境中,中间件默认会被使用。在最终的生产环境下,请根据 [这里提供的配置](http://vuejs.org/guide/application.html#Deploying_for_Production) 把 `process.env.NODE_ENV !== 'production'` 替换为 `false`。
-
-### 内置的 logger 中间件
-
-Vuex 有个自带的 logger 中间件用于 debugging:
-
-``` js
-const store = new Vuex.Store({
-  middlewares: [Vuex.createLogger()]
-})
-```
-
-`createLogger` 函数有这几个 options:
-
-``` js
-const logger = Vuex.createLogger({
-  collapsed: false, // 自动展开输出的 mutations
-  transformer (state) {
-    // 输出前对 state 进行转换
-    // 比如说只返回一个 sub-tree
-    return state.subTree
-  },
-  mutationTransformer (mutation) {
-    // mutations 会格式化为 { type, payload } 输出
-    // 我们可以按照自己的需求格式化成任何我们想要的结构
-    return mutation.type
-  }
-})
-```
-
-注意这个 logger 中间件会得到 state 快照,所以只能用于开发环境。

+ 0 - 133
docs/zh-cn/mutations.md

@@ -1,133 +0,0 @@
-# Mutations
-
-Mutations 本质上是一个事件系统:每个 mutation 都有一个 **事件名 (name)** 和 一个 **回调函数 (handler)**. 任何一个 Mutation handler 的第一个参数永远为所属 store 的整个 state 对象:
-
-``` js
-import Vuex from 'vuex'
-
-const store = new Vuex.Store({
-  state: {
-    count: 1
-  },
-  mutations: {
-    INCREMENT (state) {
-      // 改变 state
-      state.count++
-    }
-  }
-})
-```
-
-用全部大写命名 mutation 是一个惯例,方便将它和 actions 区分开。
-
-你不能直接调用 mutation handler. 这里传入 Store 构造函数的选项更像是在注册事件回调:『当 `INCREMENT` 事件被触发时,调用这个 handler』。触发 mutation handler 的方法是 dispatch 一个 mutation 的事件名:
-
-``` js
-store.dispatch('INCREMENT')
-```
-
-### 带参数的 dispatch
-
-`store.dispatch` 可以接受额外的参数:
-
-``` js
-// ...
-mutations: {
-  INCREMENT (state, n) {
-    state.count += n
-  }
-}
-```
-``` js
-store.dispatch('INCREMENT', 10)
-```
-
-这里的 `10` 会紧跟着 `state` 作为第二个参数被传递到 mutation handler. 所有额外的参数被称为该 mutation 的 payload.
-
-### Object 风格的 Dispatch
-
-> 需要版本 >=0.6.2
-
-你也可以传入对象来 dispatch mutation 操作:
-
-``` js
-store.dispatch({
-  type: 'INCREMENT',
-  payload: 10
-})
-```
-
-注意,当使用对象风格参数时,你应该把全部传入参数作为对象的属性传入。整个对象都会被作为 mutation 函数的第二个参数被传入:
-
-``` js
-mutations: {
-  INCREMENT (state, mutation) {
-    state.count += mutation.payload
-  }
-}
-```
-
-### Mutations 应当遵守 Vue 的响应系统规则
-
-由于 Vuex store 内部的 state 对象被 Vue 改造成了响应式对象,当我们对 state 进行修改时,任何观测着 state 的 Vue 组件都会自动地进行相应地更新。但同时,这也意味着在 Vuex 的 mutation handler 中修改状态时也需要遵循 Vue 特有的一些注意点:
-
-1. 尽可能在创建 store 时就初始化 state 所需要的所有属性;(就像创建 Vue 实例时应当初始化 `data` 一样)
-
-2. 当添加一个原本不存在的属性时,需要:
-
-  - 使用 `Vue.set(obj, 'newProp', 123)`;或者 -
-
-  - 拷贝并替换原本的对象。利用 stage 2 的语言特性 [object spread syntax](https://github.com/sebmarkbage/ecmascript-rest-spread),我们可以使用这样的语法:
-
-    ``` js
-    state.obj = { ...state.obj, newProp: 123 }
-    ```
-
-### 用常量为 Mutations 命名
-
-为了可以使 linters 之类的工具发挥作用,通常我们建议使用常量去命名一个 mutation, 并且把这些常量放在单独的地方。这样做可以让你的代码合作者对整个 app 包含的 mutations 一目了然:
-
-``` js
-// mutation-types.js
-export const SOME_MUTATION = 'SOME_MUTATION'
-```
-
-``` js
-// store.js
-import Vuex from 'vuex'
-import { SOME_MUTATION } from './mutation-types'
-
-const store = new Vuex.Store({
-  state: { ... },
-  actions: { ... },
-  mutations: {
-    // we can use the ES2015 computed property name feature
-    // to use a constant as the function name
-    [SOME_MUTATION] (state) {
-      // mutate state
-    }
-  }
-})
-```
-
-用不用常量取决于你 —— 在需要多人协作的大型项目中,这会很有帮助。但如果你不喜欢,你完全可以不这样做。
-
-### mutation 必须是同步函数
-
-一条重要的原则就是要记住** mutation 必须是同步函数**。为什么?请参考下面的例子:
-
-``` js
-mutations: {
-  SOME_MUTATION (state) {
-    api.callAsyncMethod(() => {
-      state.count++
-    })
-  }
-}
-```
-
-现在想象,我们正在 debug 一个 app 并且观察我们的 mutation 日志。每一条 mutation 被记录,我们都想要能够将快照中前一状态和后一状态对比。然而,在上面的例子中 mutation 中的异步函数中的回调让这不可能完成:因为当 mutation 触发的时候,回掉函数还没有被调用,我们不知道什么时候回调函数实际上被调用。实质上任何在回调函数中进行的的状态的改变都是不可追踪的。
-
-### 下一步:Actions
-
-在 mutation 中混合异步调用会导致你的程序很难调试。例如,当你能调用了两个包含异步回调的 mutation 来改变状态,你怎么知道什么时候回调和哪个先回调呢?这就是为什么我们要区分这两个概念。在 Vuex 中,我们将全部的改变都用同步方式实现。我们将全部的异步操作都放在[Actions](actions.md)中。

+ 0 - 154
docs/zh-cn/state.md

@@ -1,154 +0,0 @@
-# State 和 Getters
-
-### 单一状态树
-
-Vuex 使用 **单一状态树** —— 是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个『唯一数据源([SSOT](https://en.wikipedia.org/wiki/Single_source_of_truth))』而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。
-
-单状态树和模块化并不冲突 —— 在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。
-
-### 在 Vue 组件中获得 Vuex 状态
-
-那么我们如何在 Vue 组件中展示状态呢?由于 Vuex 的状态存储是响应式的,从 store 实例中读取状态最简单的方法就是在计算属性 [computed property](http://vuejs.org.cn/guide/computed.html) 中返回某个状态:
-
-``` js
-// 在某个 Vue 组件的定义对象里
-computed: {
-  count: function () {
-    return store.state.count
-  }
-}
-```
-
-每当 `store.state.count` 变化的时候, 都会重新求取计算属性,并且触发更新相关联的 DOM。
-
-然而,这种模式导致组件依赖的全局状态单利。这导致测试组件变得更麻烦,同时运行多个共享一套组件的应用实例也会变得更困难。在大型应用中,我们需要把状态从根组件『注入』到每一个子组件中。下面便是如何实现:
-
-1. 安装 Vuex 并且将您的根组件引入 store 实例:
-
-  ``` js
-  import Vue from 'vue'
-  import Vuex from 'vuex'
-  import store from './store'
-  import MyComponent from './MyComponent'
-
-  // 关键点,教 Vue 组件如何处理与 Vuex 相关的选项
-  Vue.use(Vuex)
-
-  var app = new Vue({
-    el: '#app',
-    // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
-    store, // 译注:简写,等效于 store: store
-    components: {
-      MyComponent
-    }
-  })
-  ```
-
-  通过在根实例中注册 `store` 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 `this.$store` 访问到。不过事实上,我们几乎不会需要直接引用它。
-
-2. 在子组件中,通过在 `vuex.getters` 选项里定义的 **getter** 方法来读取状态:
-
-  ``` js
-  // MyComponent.js
-  export default {
-    template: '...',
-    data () { ... },
-    // 此处为我们从 store 实例中取回状态的位置
-    vuex: {
-      getters: {
-        // 该 getter 函数将会把仓库的 `store.state.count` 绑定为组件的 `this.count`
-        count: function (state) {
-          return state.count
-        }
-      }
-    }
-  }
-  ```
-
-  请留意 `vuex` 的这个特殊选项(译注:getters 子对象)。它是我们指定当前组件能从 store 里获取哪些状态信息的地方。它的每个属性名将对应一个 getter 函数。该函数仅接收 store 的整个状态树作为其唯一参数,之后既可以返回状态树的一部分,也可以返回从状态树中求取的计算值。而返回结果,则会依据这个 getter 的属性名添加到组件上,用法与组件自身的*计算属性*一毛一样。
-
-  大多数时候,“getter” 函数可以用 ES2015 的箭头函数方法实现得非常简洁:
-
-  ``` js
-  vuex: {
-    getters: {
-      count: state => state.count
-    }
-  }
-  ```
-
-### Getter 函数必须是纯函数
-
-所有的 Vuex getter 函数必须是[纯函数](https://en.wikipedia.org/wiki/Pure_function)(译注:在我之前还没有中文 wiki,简单来讲就是 1.计算完全依赖函数输入值,而非其他隐藏信息,若输入相同,则输出也必须相同 2. 该函数不能有语义上可观察的[函数副作用](https://zh.wikipedia.org/wiki/%E5%87%BD%E6%95%B0%E5%89%AF%E4%BD%9C%E7%94%A8),如“触发事件”,“其他形式的输出”等。) —— 它们取值只依赖传入的状态树。这让组件的测试和编组更容易且更高效。这也意味着:**在 getter 里你不能依赖 `this` 关键字**。
-
-如果你确实需要使用 `this`,例如需要用到组件内部的本地状态来计算些派生属性,那么你需要另外单开一个计算属性:
-
-
-``` js
-vuex: {
-  getters: {
-    currentId: state => state.currentId
-  }
-},
-computed: {
-  isCurrent () {
-    return this.id === this.currentId
-  }
-}
-```
-
-### getter 函数可以返回派生状态
-
-Vuex 状态的 getters 内部其实就是计算属性,这就意味着你能够以响应式的方式(并且更高效)地计算派生属性。举个例子,比如我们有一个包含全部消息的 `messages` 数组,和一个代表用户当前打开帖子的 `currentThreadID` 索引。而我们想仅向用户显示属于当前帖子的信息,一个过滤后的列表:
-
-``` js
-vuex: {
-  getters: {
-    filteredMessages: state => {
-      return state.messages.filter(message => {
-        return message.threadID === state.currentThreadID
-      })
-    }
-  }
-}
-```
-
-因为 Vue.js 计算属性是自动缓存的,且仅在对应的依赖发生改变时才会重新计算,所以你不必担心 getter 函数会在每次状态变更事件触发时都被频繁的调用。
-
-### 在多组件中共享 getter 函数
-
-显而易见,`filteredMessages` getter 可能在多个组件中都很有用。这种情况下,让多组件共享相同的 getter 会是个好主意:
-
-``` js
-// getters.js
-export function filteredMessages (state) {
-  return state.messages.filter(message => {
-    return message.threadID === state.currentThreadID
-  })
-}
-```
-
-``` js
-// 在组件中...
-import { filteredMessages } from './getters'
-
-export default {
-  vuex: {
-    getters: {
-      filteredMessages
-    }
-  }
-}
-```
-
-因为 getter 函数都是纯函数,被多个组件共享的 getter 被高效地缓存起来了:当依赖状态发生改变的时候,该 getter 也仅仅只重新计算一次,便可供所有组件使用。
-
-> 与 Flux 的对比参考:Vuex 的 getter 函数可以大致类比成 Redux 中的 [`mapStateToProps`](https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)。然而, 由于其内部运用了 Vue 的计算属性[记忆化](https://en.wikipedia.org/wiki/Memoization)机制,它要比 `mapStateToProps` 更加高效,且更近似于 ReactJs 的 [reselect](https://github.com/reactjs/reselect)。
-
-### 组件不允许直接修改 store 实例的状态
-
-请始终记得非常重要的这点,就是:**组件永远都不应该直接改变 Vuex store 的状态**。因为我们想要让状态的每次改变都很明确且可追踪,Vuex 状态的所有改变都必须在 store 的 mutation handler (变更句柄)中管理。
-
-为了强化该规则,在开启([严格模式(Strict Mode)](strict.md))时,若有 store 的状态在 mutation 句柄外被修改,Vuex 就会报错。
-
-现在有了这一规则,我们 Vue 组件的职能就少了很多:他们通过只读的 getter 与 Vuex store 的状态相绑定,组件唯一能影响全局状态的方法就是想办法触发 **mutations**(我们接下来会谈到)。若有必要,组件仍然能够处理和操作本地状态,但是我们不再在单独的组件中放置任何数据请求或全局状态变更的逻辑。这些操作全部都集中于 Vuex 相关的文件中,这样能让大型应用变得更容易理解和维护。

+ 0 - 25
docs/zh-cn/strict.md

@@ -1,25 +0,0 @@
-# 严格模式
-
-要开启严格模式,只需要在创建 Vuex store 实例时传入 `strict: true`:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  strict: true
-})
-```
-
-在严格模式中,每当 Vuex state 在 mutation handlers 外部被改变时都会抛出错误。这样我们可以确保所有对状态的改变都可以清晰地被 debugging 工具所记录。
-
-### 开发环境 vs. 生产环境
-
-**不要在生产环境中开启严格模式!** 为了检测在不合适的地方发生的状态修改, 严格模式会对 state 树进行一个深观察 (deep watch)。所以为了避免不必要的性能损耗,请在生产环境中关闭严格模式。
-
-和配置带快照的中间件一样,我们可以通过配置构建工具来将其自动化:
-
-``` js
-const store = new Vuex.Store({
-  // ...
-  strict: process.env.NODE_ENV !== 'production'
-})
-```

+ 0 - 159
docs/zh-cn/structure.md

@@ -1,159 +0,0 @@
-# 应用结构
-
-Vuex 并不限制你的代码结构,但是制定了一套需要遵守的规则:
-
-1. 应用 state 存在于单个对象中;
-2. 只有 mutation handlers 可以改变 state;
-3. Mutations 必须是同步的,它们做的应该仅仅是改变 state;
-4. 所有类似数据获取的异步操作细节都应封装在 actions 里面。
-5. 组件通过 getters 从 store 中获取 state,并通过调用 actions 来改变 state。
-
-Vuex actions 和 mutations 优雅的地方在于 **它们都只是一些函数**。只需要遵循以上的准则,怎么组织代码就取决于你自己了。不过,遵循一些规则能够让你更快地熟悉其他使用 vuex 的项目。这里介绍了一些适应不同项目规模的应用结构。
-
-### 简单的项目
-
-在简单的项目里,我们可以把 **actions** 和 **mutations** 分离到各自的文件:
-
-``` bash
-.
-├── index.html
-├── main.js
-├── components
-│   ├── App.vue
-│   └── ...
-└── store
-    ├── index.js     # exports the vuex instance
-    ├── actions.js   # exports all actions
-    └── mutations.js # exports all mutations
-```
-
-参见[计数器 示例](https://github.com/vuejs/vuex/tree/master/examples/todomvc) 或 [TodoMVC 示例](https://github.com/vuejs/vuex/tree/master/examples/todomvc).
-
-另外,你也可以将 mutations 拆分到不同的文件中去。
-
-### 中型到大型项目
-
-对于有一定规模的项目,我们会希望把 Vuex 相关的代码分割到多个『模块 (module)』当中去,每一个 module 负责应用的一个领域(和原始 Flux 中的多个 store 类似)。在 Vuex 中,一个模块所要做的其实也就是导出 state 的一部分(可以理解为一颗子树),以及和该部分 state 相关的所有 mutations:
-
-???
-
-``` bash
-├── index.html
-├── main.js
-├── api
-│   └── ... # abstractions for making API requests
-├── components
-│   ├── App.vue
-│   └── ...
-└── vuex
-    ├── actions.js        # exports all actions
-    ├── store.js          # where we assemble modules and export the store
-    ├── mutation-types.js # constants
-    └── modules
-        ├── cart.js       # state and mutations for cart
-        └── products.js   # state and mutations for products
-```
-
-一个典型的模块:
-
-``` js
-// store/modules/products.js
-import { RECEIVE_PRODUCTS, ADD_TO_CART } from '../mutation-types'
-
-// 该模块的初始状态
-const state = {
-  all: []
-}
-
-// 相关的 mutations
-const mutations = {
-  [RECEIVE_PRODUCTS] (state, products) {
-    state.all = products
-  },
-
-  [ADD_TO_CART] (state, productId) {
-    state.all.find(p => p.id === productId).inventory--
-  }
-}
-
-export default {
-  state,
-  mutations
-}
-```
-
-在 `vuex/store.js` 里我们把多个模块集合在一起来创建 Vuex 实例:
-
-``` js
-import Vue from 'vue'
-import Vuex from '../../../src'
-import * as actions from './actions'
-// 导入各个模块的初始状态和 mutations
-import cart from './modules/cart'
-import products from './modules/products'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  // 组合各个模块
-  modules: {
-    cart,
-    products
-  }
-})
-```
-在这里,`cart` 模块的初始状态会作为 `store.state.cart` 被设置到底层 state 树上。另外,**所有在子模块上定义的 mutations 都只能改变当前相关联子模块上的 state 子树**。所以在 `cart` 模块上定义的 mutations 接收到的第一个参数将会是 `store.state.cart`。
-
-state 子树的根节点不能在模块内部改写。比如这样的写法是无效的:
-
-``` js
-const mutations = {
-  SOME_MUTATION (state) {
-    state = { ... }
-  }
-}
-```
-
-可替代的写法是将真实的 state 作为子树本身的属性在存储:
-
-``` js
-const mutations = {
-  SOME_MUTATION (state) {
-    state.value = { ... }
-  }
-}
-```
-
-由于一个模块导出的仅仅是对象和函数,它们也是非常易于测试和维护的。当然,你也可以按你的喜好和需求对这样的组织方式进行修改。
-
-需要注意的一点:我们并不把 actions 放在模块里面,因为一个 action 可能需要触发影响多个模块的 mutations。同时,actions 本来就应该和具体的状态以及 mutations 解耦。如果单独的 actions 文件变得太过庞大,我们也可以划分出一个 actions 文件夹并将 actions 分散到多个文件中。
-
-参见 [购物车示例](https://github.com/vuejs/vuex/tree/master/examples/shopping-cart)。
-
-### 提取共用的 Computed Getters
-
-在大型项目中,你可能会发现有多个组件使用相似的计算属性来获取 state。由于计算属性的 getters 也只是普通函数,你可以把它们独立出来放在一个单独的文件里,以实现在多个组件之间的共享:
-
-``` js
-// getters.js
-import store from './store'
-
-export function filteredTodos () {
-  return store.state.messages.filter(message => {
-    return message.threadID === vuex.state.currentThreadID
-  })
-}
-```
-
-``` js
-// in a component...
-import { filteredTodos } from './getters'
-
-export default {
-  computed: {
-    filteredTodos
-  }
-}
-```
-
-这和 [NuclearJS 中的 Getters 概念](https://optimizely.github.io/nuclear-js/docs/04-getters.html) 非常相似。

+ 0 - 161
docs/zh-cn/testing.md

@@ -1,161 +0,0 @@
-# 测试
-
-我们主要想针对 Vuex 中的 mutaions 和 actions 进行单元测试。
-
-## 测试 Mutations
-
-Mutations 很容易被测试,因为它们仅仅是一些完全依赖参数的函数。这里有一个小技巧,如果你在 `store.js` 文件中定义了 mutations,并且使用 ES2015 模块功能默认输出了 Vuex.Store 的实例,那么你仍然可以给 mutation 取个变量名然后把它输出去:
-
-``` js
-const state = { ... }
-
-// mutations 作为命名输出对象
-export const mutations = { ... }
-
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-下面是用 Mocha + Chai 测试一个 mutation 的例子(实际上你可以用任何你喜欢的测试框架):
-
-``` js
-// mutations.spec.js
-import { expect } from 'chai'
-import { mutations } from './store'
-
-// 解构 mutations
-const { INCREMENT } = mutations
-
-describe('mutations', () => {
-  it('INCREMENT', () => {
-    // 模拟状态
-    const state = { count: 0 }
-    // 应用 mutation
-    INCREMENT(state)
-    // 断言结果
-    expect(state.count).to.equal(1)
-  })
-})
-```
-
-## 测试 Actions
-
-Actions 应对起来略微棘手,因为它们可能需要调用外部的 API。当测试 actions 的时候,我们需要增加一个 mocking 服务层 —— 例如,我们可以把 API 调用抽象成服务,然后在测试文件中用 mock 服务回应 API 调用。为了便于解决 mock 依赖,可以用 Webpack 和  [inject-loader](https://github.com/plasticine/inject-loader) 打包测试文件。
-
-下面是一个测试异步 action 的例子:
-
-``` js
-// actions.js
-import shop from '../api/shop'
-
-export const getAllProducts = ({ dispatch }) => {
-  dispatch('REQUEST_PRODUCTS')
-  shop.getProducts(products => {
-    dispatch('RECEIVE_PRODUCTS', products)
-  })
-}
-```
-
-``` js
-// actions.spec.js
-
-// 使用 require 语法处理内联 loaders。
-// inject-loader 返回一个允许我们注入 mock 依赖的模块工厂
-import { expect } from 'chai'
-const actionsInjector = require('inject!./actions')
-
-// 使用 mocks 创建模块
-const actions = actionsInjector({
-  '../api/shop': {
-    getProducts (cb) {
-      setTimeout(() => {
-        cb([ /* mocked response */ ])
-      }, 100)
-    }
-  }
-})
-
-// 用指定的 mutaions 测试 action 的辅助函数
-const testAction = (action, args, state, expectedMutations, done) => {
-  let count = 0
-  // 模拟 dispatch
-  const dispatch = (name, ...payload) => {
-    const mutation = expectedMutations[count]
-    expect(mutation.name).to.equal(name)
-    if (payload) {
-      expect(mutation.payload).to.deep.equal(payload)
-    }
-    count++
-    if (count >= expectedMutations.length) {
-      done()
-    }
-  }
-  // 用模拟的 store 和参数调用 action
-  action({dispatch, state}, ...args)
-
-  // 检查是否没有 mutation 被 dispatch
-  if (expectedMutations.length === 0) {
-    expect(count).to.equal(0)
-    done()
-  }
-}
-
-describe('actions', () => {
-  it('getAllProducts', done => {
-    testAction(actions.getAllProducts, [], {}, [
-      { name: 'REQUEST_PRODUCTS' },
-      { name: 'RECEIVE_PRODUCTS', payload: [ /* mocked response */ ] }
-    ], done)
-  })
-})
-```
-
-### 执行测试
-
-如果你的 mutations 和 actions 编写正确,经过合理地 mocking 处理之后这些测试应该不依赖任何浏览器 API,因此你可以直接用 Webpack 打包这些测试文件然后在 Node 中执行。换种方式,你也可以用 `mocha-loader` 或 `Karma` + `karma-webpack`在真实浏览器环境中进行测试。
-
-#### 在 Node 中执行测试
-
-创建以下 webpack 配置:
-
-``` js
-module.exports = {
-  entry: './test.js',
-  output: {
-    path: __dirname,
-    filename: 'test-bundle.js'
-  },
-  module: {
-    loaders: [
-      {
-        test: /\.js$/,
-        loader: 'babel',
-        exclude: /node_modules/
-      }
-    ]
-  },
-  babel: {
-    presets: ['es2015']
-  }
-}
-```
-
-然后:
-
-``` bash
-webpack
-mocha test-bundle.js
-```
-
-### 在浏览器中执行测试
-
-1. 安装 `mocha-loader`
-2. 把上述 webpack 配置中的 `entry` 改成 `'mocha!babel!./test.js'`
-3. 用以上配置启动 `webpack-dev-server`
-4. 访问 `localhost:8080/webpack-dev-server/test-bundle`.
-
-#### 使用 Karma + karma-webpack 在浏览器中执行测试
-
-详询 [vue-loader documentation](http://vuejs.github.io/vue-loader/workflow/testing.html)。

+ 0 - 264
docs/zh-cn/tutorial.md

@@ -1,264 +0,0 @@
-# 简易教程
-
-让我们通过一个简单的实际例子来理解怎样使用 Vuex。这个例子里,我们要实现一个按钮,每点击它一次,计数器加一。
-
-![End Result](tutorial/result.png)
-
-我们会通过这个例子解释相应的概念,以及 Vuex 所要解决的问题:如何管理一个包含许多组件的大型应用。我们假定这个例子使用以下三个组件:
-
-### `components/App.vue`
-
-根组件,它包含了两个另外的子组件:
-
-* `Display` 显示当前计数器的值
-* `Increment` 使计数器加一的按钮
-
-```html
-<template>
-  <div>
-    <Display></Display>
-    <Increment></Increment>
-  </div>
-</template>
-
-<script>
-
-import Display from './Display.vue'
-import Increment from './Increment.vue'
-
-export default {
-  components: {
-    Display: Display,
-    Increment: Increment
-  }
-}
-</script>
-```
-
-### `components/Display.vue`
-
-```html
-<template>
-  <div>
-    <h3>Count is 0</h3>
-  </div>
-</template>
-
-<script>
-export default {
-}
-</script>
-```
-
-### `components/Increment.vue`
-
-```html
-<template>
-  <div>
-    <button>Increment +1</button>
-  </div>
-</template>
-
-<script>
-export default {
-}
-</script>
-```
-
-### 在没有 Vuex 的日子里
-
-* `Increment` 与 `Display` 彼此无法感知到彼此的存在,也无法相互传递消息。是怎样的孤独。
-* `App` 将必须通过事件(events)与广播(broadcasts)与其他两个组件进行协调。
-* 而 `App` 作为二者之间的协调者,导致这些组件并没法被复用,被迫紧密耦合。调整应用的结构,则可能导致应用崩溃。
-
-### Vuex 的流程
-
-我们需要依次执行这些步骤:
-
-![Vuex Flow](tutorial/vuex_flow.png)
-
-仅仅为了增加计数而采取这么多步骤显然很多余。但请注意,这些概念的引入是为了构建大型应用,提高可维护性,降低调试与长期维护的难度而设计的。(译注:换言之,这是屠龙刀,拿来杀鸡只是为了让我们好懂)好,那么接下来我们就用 vuex 来进行重构吧!
-
-### 第一步:加入 store
-
-store 存储应用所需的数据。所有组件都从 store 中读取数据。在我们开始之前,先用 npm 安装 Vuex:
-
-```
-$ npm install --save vuex
-```
-
-建一个新文件 `vuex/store.js`
-
-```js
-import Vue from 'vue'
-import Vuex from 'vuex'
-
-// 告诉 vue “使用” vuex
-Vue.use(Vuex)
-
-// 创建一个对象来保存应用启动时的初始状态
-const state = {
-  // TODO: 放置初始状态
-}
-
-// 创建一个对象存储一系列我们接下来要写的 mutation 函数
-const mutations = {
-  // TODO: 放置我们的状态变更函数
-}
-
-// 整合初始状态和变更函数,我们就得到了我们所需的 store
-// 至此,这个 store 就可以连接到我们的应用中
-export default new Vuex.Store({
-  state,
-  mutations
-})
-```
-
-我们需要修改根组件来让应用注意到 store 的存在位置。
-
-修改 `components/App.vue`,注入 store。
-
-```js
-import Display from './Display.vue'
-import Increment from './IncrementButton.vue'
-import store from '../vuex/store' // import 我们刚刚创建的 store
-
-export default {
-  components: {
-    Display: Display,
-    Increment: Increment
-  },
-  store: store // 在根组件加入 store,让它的子组件和 store 连接
-}
-```
-
-> **提示**:如果使用 ES6 和 babel 你可以这样写:
->
->     components: {
->       Display,
->       Increment,
->     },
->     store
-
-### 第二步:创建 action
-
-action 是一种专门用来被 component 调用的函数。action 函数能够通过分发相应的 mutation 函数,来触发对 store 的更新。action 也可以先从 HTTP 后端或 store 中读取其他数据之后再分发更新事件。
-
-创建一个新文件 `vuex/actions.js`,然后写入一个函数 `incrementCounter`:
-
-```js
-// action 会收到 store 作为它的第一个参数
-// 既然我们只对事件的分发(dispatch 对象)感兴趣。(state 也可以作为可选项放入)
-// 我们可以利用 ES6 的解构(destructuring)功能来简化对参数的导入
-export const incrementCounter = function ({ dispatch, state }) {
-  dispatch('INCREMENT', 1)
-}
-```
-
-然后我们从 `components/Increment.vue` 组件里调用 action 函数
-
-```html
-<template>
-  <div>
-    <button @click='increment'>Increment +1</button>
-  </div>
-</template>
-
-<script>
-import { incrementCounter } from '../vuex/actions'
-export default {
-  vuex: {
-    actions: {
-      increment: incrementCounter
-    }
-  }
-}
-</script>
-```
-
-回顾一下我们刚刚添加的内容背后所潜藏的一些有趣的点:
-
-1. 我们有了一个新对象 `vuex.actions`,包含着新的 action。
-2. 我们没有指定特定的 store, object, state 等等。Vuex 会自动把它们串联好。
-3. 我们可以用 `this.increment()` 在任何方法中调用此 action。
-4. 我们也可以通过 `@click` 参数调用它,与使用其他普通的 Vue 组件方法并无二致。
-5. 我们给 action 起名叫 `incrementCounter`,但是在具体使用时,我们可以根据需要进行重新命名。
-
-### 第三步:创建 state 和 mutation
-
-在我们的 `vuex/actions.js` 文件里我们 dispatch 了一个叫做 `INCREMENT` 的 mutation,但是我们还没有写它所对应的具体操作。我们现在就来做这个事。
-
-修改 `vuex/store.js`:
-
-```js
-const state = {
-  // 应用启动时,count 置为0
-  count: 0
-}
-
-const mutations = {
-  // mutation 的第一个参数是当前的 state
-  // 你可以在函数里修改 state
-  INCREMENT (state, amount) {
-    state.count = state.count + amount
-  }
-}
-```
-
-### 第四步:在组件获取值
-
-创建一个新的文件 `vuex/getters.js`:
-
-```js
-// 这个 getter 函数会返回 count 的值
-// 在 ES6 里你可以写成:
-// export const getCount = state => state.count
-
-export function getCount (state) {
-  return state.count
-}
-```
-
-这个函数返回了 state 对象里我们所需要的部分—— count 的值。我们现在在组件里加入这个 getter 函数。
-
-修改 `components/Display.vue`:
-
-```html
-<template>
-  <div>
-    <h3>Count is {{ counterValue }}</h3>
-  </div>
-</template>
-
-<script>
-import { getCount } from '../vuex/getters'
-export default {
-  vuex: {
-    getters: {
-      // 注意在这里你需要 `getCount` 函数本身而不是它的执行结果 'getCount()'
-      counterValue: getCount
-    }
-  }
-}
-</script>
-```
-
-这里我们又加入了一个新的对象 `vuex.getters`。它将 `counterValue` 绑定到了 `getCount` 这个 getter 函数上。我们给它起了一个新名字来使得这个变量在你的组件里表意更明确。
-
-你可能有点困惑——为什么我们需要用 getter 函数而不是直接从 state 里读取数据。这个概念更多的是一种最佳实践,在大型应用里更加适用。它有这么几种独特优势:
-
-1. 我们可能需要使用 getter 函数返回需经过计算的值(比如总数,平均值等)。
-2. 在大型应用里,很多组件之间可以复用同一个 getter 函数。
-3. 如果这个值的位置改变了(比如从 `store.count` 变成了 `store.counter.value`),你只需要改一个 getter 方法,而不是一堆组件。
-
-以上便是使用 getter 带来的好处。
-
-### 第五步:接下来……
-
-运行一下你的应用,它应该能正常工作了。
-
-要更深入地理解 Vuex,你可以尝试以下挑战,对该应用进行少许修改,权当练习,嗯~
-
-* 加一个“减一”的按钮。
-* 安装 [VueJS Devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd),尝试使用它提供的 Vuex 工具来观察 mutation 是如何生效的。
-* 添加一个名为 `IncrementAmount ` 的文本框组件,让用户可以输入要增加的数值。这个可能会稍有难度,因为表单在 vuex 中与原生的表现稍有不同。可以读一下[表单处理](forms.md)章节了解更多内容。

二进制
docs/zh-cn/tutorial/result.png


部分文件因为文件数量过多而无法显示