[docs] merge getters doc into state

Author: yyx990803

docs/en/SUMMARY.md

@@ -6,7 +6,6 @@
   - [State](state.md)
   - [Mutations](mutations.md)
   - [Actions](actions.md)
-  - [Getters](getters.md)
 - [Data Flow](data-flow.md)
 - [Application Structure](structure.md)
 - [Middlewares](middlewares.md)

docs/en/getters.md

@@ -48,7 +48,7 @@ However, this pattern causes the component to rely on the global store singleton
 
   By providing the `store` option to the root instance, the store will be injected into all child components of the root and will be available on them as `this.$store`. However it's quite rare that we will need to actually reference it.
 
-2. Inside child components, retrieve state using the `vuex.state` option:
+2. Inside child components, retrieve state with **getter** functions in the `vuex.state` option:
 
   ``` js
   // MyComponent.js
@@ -58,7 +58,8 @@ However, this pattern causes the component to rely on the global store singleton
     // this is where we retrieve state from the store
     vuex: {
       state: {
-        // will bind `store.state.count` on the component as `this.count`
+        // a state getter function, which will
+        // bind `store.state.count` on the component as `this.count`
         count: function (state) {
           return state.count
         }
@@ -79,7 +80,51 @@ However, this pattern causes the component to rely on the global store singleton
   }
   ```
 
-> Flux reference: this can be roughly compared to [`mapStateToProps`](https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) in Redux. However, this leverages Vue's computed properties memoization under the hood, thus is more efficient than `mapStateToProps`, and more similar to [reselect](https://github.com/reactjs/reselect) and [NuclearJS getters](https://optimizely.github.io/nuclear-js/docs/04-getters.html).
+### Getters Can Return Derived State
+
+Vuex state getters are computed properties under the hood, this means you can leverage them to reactively (and efficiently) compute derived state. For example, say in the state we have an array of `messages` containing all message, and a `currentThreadID` representing a thread that is currently being viewed by the user. What we want to display to the user is a filtered list of messages that belong to the current thread:
+
+``` js
+vuex: {
+  state: {
+    filteredMessages: state => {
+      return state.messages.filter(message => {
+        return message.threadID === state.currentThreadID
+      })
+    }
+  }
+}
+```
+
+Because Vue.js computed properties are automatically cached (and only validated when a reactive dependency changes), you don't need to worry about this function being called on every mutation.
+
+> Flux reference: Vuex getters can be roughly compared to [`mapStateToProps`](https://github.com/rackt/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) in Redux. However, this leverages Vue's computed properties memoization under the hood, thus is more efficient than `mapStateToProps`, and more similar to [reselect](https://github.com/reactjs/reselect) and [NuclearJS getters](https://optimizely.github.io/nuclear-js/docs/04-getters.html).
+
+### Sharing Getters Across Multiple Components
+
+As you can see, in most cases getters are just pure functions: they take the whole state in, and returns some value. The `filteredMessages` getter may be useful inside multiple components, and it's totally possible to just share the same function between them:
+
+``` 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: {
+    state: {
+      filteredMessages
+    }
+  }
+}
+```
 
 ### Components Are Not Allowed to Directly Mutate State