adjust docs structure

Author: yyx990803

docs/LANGS.md

@@ -1 +1,2 @@
-* [English](en/)
+* [2.0 - English](en/)
+* [1.0 Docs](old/)

docs/en/SUMMARY.md

@@ -1,18 +1,18 @@
 # Vuex
 
-### Large-scale State Management for Vue.js
-
-> Note: This is docs for [email protected]. The docs for 1.x is [here](https://github.com/vuejs/vuex/tree/1.0/docs).
+> Note: This is docs for [email protected].
 
+- [Looking for 1.0 Docs?](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)
 - Core Concepts
   - [State](state.md)
+  - [Getters](getters.md)
   - [Mutations](mutations.md)
   - [Actions](actions.md)
-- [Data Flow](data-flow.md)
+  - [Modules](modules.md)
 - [Application Structure](structure.md)
 - [Plugins](plugins.md)
 - [Strict Mode](strict.md)

docs/en/data-flow.md

@@ -0,0 +1,77 @@
+
+# Getters
+
+Sometimes we may need to compute derived state based on store state, for example filtering through a list of items and counting them:
+
+``` js
+computed: {
+  doneTodosCount () {
+    return this.$store.state.todos.filter(todo => todo.done).length
+  }
+}
+```
+
+If more than one component needs to make use of this, we have to either duplicate the function, or extract it into a shared helper and import it in multiple places - both are less than ideal.
+
+Vuex allows us to define "getters" in the store (think of them as computed properties for stores):
+
+``` js
+const store = new Vuex.Store({
+  state: {
+    todos: [
+      { id: 1, text: '...', done: true },
+      { id: 2, text: '...', done: false }
+    ]
+  },
+  getters: {
+    doneTodosCount: state => {
+      return state.todos.filter(todo => todo.done).length
+    }
+  }
+})
+```
+
+The getters will be exposed on the `store.getters` object:
+
+``` js
+store.getters.doneTodosCount // -> 1
+```
+
+We can now easily make use of it inside any component:
+
+``` js
+computed: {
+  doneTodosCount () {
+    return this.$store.getters.doneTodosCount
+  }
+}
+```
+
+### The `mapGetters` Helper
+
+The `mapGetters` helper simply maps store getters to local computed properties:
+
+``` js
+import { mapState } from 'vuex'
+
+export default {
+  // ...
+  computed: {
+    // mix the getters into computed with object spread operator
+    ...mapGetters([
+      'doneTodosCount',
+      'anotherGetter',
+      // ...
+    ])
+  }
+}
+```
+
+If you want to map a getter to a different name, use an object:
+
+``` js
+mapGetters({
+  // map this.doneCount to store.getters.doneTodosCount
+  doneCount: 'doneTodosCount'
+})
+```

docs/en/getters.md

@@ -4,50 +4,37 @@ At the center of every Vuex application is the **store**. A "store" is basically
 
 1. Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes.
 
-2. You cannot directly mutate the store's state. The only way to change a store's state is by explicitly dispatching **mutations**. This makes every state change easily track-able, and enables tooling that helps us better understand our applications.
+2. You cannot directly mutate the store's state. The only way to change a store's state is by explicitly **committing mutations**. This ensures every state change leaves a track-able record, and enables tooling that helps us better understand our applications.
 
 ### The Simplest Store
 
-> **NOTE:** We will be using ES2015 syntax for code examples for the rest of the docs. If you haven't picked it up, [you should](https://babeljs.io/docs/learn-es2015/)! The doc also assumes you are already familiar with the concepts discussed in [Building Large-Scale Apps with Vue.js](http://vuejs.org/guide/application.html).
+> **NOTE:** We will be using ES2015 syntax for code examples for the rest of the docs. If you haven't picked it up, [you should](https://babeljs.io/docs/learn-es2015/)!
 
-Creating a Vuex store is pretty straightforward - just provide an initial state object, and some mutations:
+After [installing](installation.md) Vuex, let's create a store. It is pretty straightforward - just provide an initial state object, and some mutations:
 
 ``` js
-import Vuex from 'vuex'
-
-const state = {
-  count: 0
-}
-
-const mutations = {
-  INCREMENT (state) {
-    state.count++
+// Make sure to call Vue.use(Vuex) first if using a module system
+
+const store = new Vuex.Store({
+  state: {
+    count: 0
+  },
+  mutations: {
+    INCREMENT (state) {
+      state.count++
+    }
   }
-}
-
-export default new Vuex.Store({
-  state,
-  mutations
 })
 ```
 
-Now, you can access the state object as `store.state`, and trigger a mutation by dispatching its name:
+Now, you can access the state object as `store.state`, and trigger a state change with the `store.commit` method:
 
 ``` js
-store.dispatch('INCREMENT')
+store.commit('INCREMENT')
 
 console.log(store.state.count) // -> 1
 ```
 
-If you prefer object-style dispatching, you can also do this:
-
-``` js
-// same effect as above
-store.dispatch({
-  type: 'INCREMENT'
-})
-```
-
-Again, the reason we are dispatching a mutation instead of changing `store.state.count` directly, is because we want to explicitly track it. This simple convention makes your intention more explicit, so that you can reason about state changes in your app better when reading the code. In addition, this gives us the opportunity to implement tools that can log every mutation, take state snapshots, or even perform time travel debugging.
+Again, the reason we are committing a mutation instead of changing `store.state.count` directly, is because we want to explicitly track it. This simple convention makes your intention more explicit, so that you can reason about state changes in your app better when reading the code. In addition, this gives us the opportunity to implement tools that can log every mutation, take state snapshots, or even perform time travel debugging.
 
-Now this is just the simplest possible example of what a store is. But Vuex is more than just the store. Next, we will discuss some core concepts in depth: [State](state.md), [Mutations](mutations.md) and [Actions](actions.md).
+Next, let's see [how to use the State inside Vue components](state.md).

docs/en/getting-started.md

@@ -3,8 +3,6 @@
 Vuex mutations are essentially events: each mutation has a **name** and a **handler**. The handler function will receive the state as the first argument:
 
 ``` js
-import Vuex from 'vuex'
-
 const store = new Vuex.Store({
   state: {
     count: 1