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 的状态

 

 

 

　　《未完》