State ，Getter , Mutation , Action , Module

---恢复内容开始---

1.    State  (保存在vuex中的状态数据)

　　组件中使用：

　　　　　　import { mapState } from 'vuex'

　　　　　　computed:{

　　　　　　　　...mapState(['count']);  // // 映射 this.count 为 store.state.count

　　　　　　　　myRouter(){

　　　　　　　　　　return  this.count  //this.myRouter === this.count === store.state.count

　　　　　　　　}

　　　　　　}

2.     Getter  （可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

      有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：             

　　//Getter其实是对state中数据的进一步处理

      computed: {
          doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length }  }
　　
　　Getter 会暴露为 store.getters 对象：
　　
　　

　　　组件中使用：

　　　　　　<1>

　　　　　　import { mapGetters} from 'vuex'

　　　　　　computed: {

　　　　　　　　　　// 使用对象展开运算符将 getter 混入 computed 对象中

　　　　　　　　　　 ...mapGetters([ 'doneTodosCount', 'anotherGetter',

　　　　　　　　　　　// ...

　　　　　　　　　　]) }

　　　　　　　　}
　　　　　　
　　　　　　<2>
　　　　　　
　　　　　　computed: { doneTodosCount () { return this.$store.getters.doneTodosCount } }
　　　　　

3. Mutation (更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
　　　　　　 这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：)(在 Vuex 中，mutation 都是同步事务)

　　mutations: { 
　　　　increment (state, n) { //在大多数情况下，n 应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：
　　　　　　state.count += n.amount 
　　　　　　} 
　　　　}
　　store.commit('increment', { amount: 10 })
　　　　　　
　　组件中使用：
　　
　　import { mapMutations } from 'vuex'
　　 export default {
　　　　　　 // ...
　　　　　　 methods: {
　　　　　　 ...mapMutations([ 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` 
　　　　　　// `mapMutations` 也支持载荷：
　　　　　　 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
　　　　　　　　 ]),
　　　　　　 ...mapMutations({
　　　　　　　　　　　 add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
　　　　　　　　　　　　 }) }
　　　　　　 }

4.     Action  （Action 类似于 mutation，不同在于：>>>Action 提交的是 mutation，而不是直接变更状态。>>>>>>Action 可以包含任意异步操作。）

　　

const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } })


组件中：this.$store.dispatch('xxx')

import { mapActions } from 'vuex' export default { // ... methods: { ...mapActions([ 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` // `mapActions` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` ]), ...mapActions({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')` }) } }

5.Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
　　

const moduleA = {
  state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态

　　《未完》