[docs] merge getters doc into state

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

@@ -1,46 +0,0 @@
-# Getters
-
-It's possible that multiple components will need the same computed property based on Vuex state. Since computed getters are just functions, you can split them out into a separate file so that they can be shared in any component via the store:
-
-``` js
-import Vue from 'vue'
-import Vuex from '../../../src'
-import actions from './actions'
-import mutations from './mutations'
-import getters from './getters'
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: { /*...*/ },
-  actions,
-  mutations,
-  getters
-})
-```
-
-``` js
-// getters.js
-export function filteredTodos (state) {
-  return state.messages.filter(message => {
-    return message.threadID === state.currentThreadID
-  })
-}
-```
-
-``` js
-// in a component...
-import { getters } from './store'
-const { filteredTodos } = getters
-
-export default {
-  computed: {
-    filteredTodos
-  }
-}
-
-For an actual example, check out the [Shopping Cart Example](https://github.com/vuejs/vuex/tree/master/examples/shopping-cart).
-For an actual example with hot reload API, check out the [Counter Hot Example](https://github.com/vuejs/vuex/tree/master/examples/counter-hot).
-
-
-This is very similar to [Getters in NuclearJS](https://optimizely.github.io/nuclear-js/docs/04-getters.html).

docs/en/state.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