Vuex学习小记

一、什么是Vuex

1.  Vuex是专为vue.js应用程序开发的状态管理模式(取自官方).

看图说话就是这样的：

2.Vuex的特征：

1).Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2).你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

最简单的的store：

const store = new Vux.Store({
  state: {
    count:0
  },
  mutations: {
    increment(state){
      state.count++
    }
  }
})

二、State

单一状态树

Vuex使用单一状态树——用一个对象就包含了全部应用层级
####在vue组件中获取状态
前面说了Vuex状态存储是响应式的，所以从store中读取状态最简单的方式是computed属性如:

computed:{
  count(){
    return this.$store.state;
  }
}

mapState辅助函数

// 在单独构建的版本中辅助函数为 Vuex.mapState
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed: mapState([
  'count'
])

Getter从state获取状态

const store = new Vuex.Store({
  state:{
    todos:[
      {id: 1,text: '...',done: true},
      {id: 2,text: '...',done: false  }
    ]
  },
  getters:{
    doneTodos: state=>{
      return state.todos.filter(todo=>todo.done)
    }
  }
})

通过属性访问getters:

store.getters.doneTodos//->[{id:1...}]

Getter也可以接受其他getter作为第二个参数

getters:{
  doneTodoCount: (state,getters)=>{
    return getters.doneTodos.length
  }
}

通过方法访问

getters:{
  getTodoById: (state)=>(id)=>{
    return state.todos.find(todo=>todo.id===id)
  }
}

store.getters.getTodoById(2);

mapGetters辅助函数

import {mapGetters} from 'vuex'
export default{
  computed: {
    ...mapGetters(
      ['doneTodosCount','anotherGetter']
    )
  }
}

取别名：

mapGetters({
  doneCount:'doneTodosCount'
})

三、Mutation

修改state的唯一方法是提交（commit）mutation,Vuex的mutation非常类似于事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数*(handler)

const store = new Vuex.Store({
  state:{
    count:1
  },
  mutations:{
    increment(state){
      state.count++;
    }
  }
})

提交mutation:

store.commit('increment');

提交载荷(Payload)

store.commit可以提交额外的参数,即mutation的载荷（payload）

mutaions:{
  increment(state,n){
    state.count+=n
  }
}
store.commit('increment',10)

对象风格形式提交mutation

store.commit({
  type: 'increment',
  amount: 10
})

使用常量替代Mutation事件类型

//mutation-type.js
export const SMOE_MUTATION = 'SOME_MUTATION'

//store.js
import Vuex from 'vuex'
import { SOME_MUTATION } FROM './mutation-type.js'

const store = new Vuxe.Store({
  state: {},
  mutations: {
    [SMOE_MUTATION](state){
      state.count++;
    }
  }
})

Mutation 必须是同步函数

一条重要的原则就是要记住mutation必须是同步函数
####在组件中提交mutation
可以直接使用this.$store.commit(‘xxx’)或者使用mapMutaions辅助函数将methods映射为store.commit调用

import { mapMutations } from 'vuex'
export default{
  methods: {
    ...mapMutations([
      'increment',
      'incremeentBy'
    ])
    ...mapMutations({
      add: 'increment'
    })
  }
}

四、Action

Action类似于mutation,不同在于:

+Action提交的是mutation，而不是直接变更状态
+Action可以包含任何异步操作
简单action实例:

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

Action 函数接受一个与store实例具有相同方法和属性的context对象

简化代码：

actions: {
  increment({commit}){
    commit('increment');
  }
}

分发Action

Action通过store.dispatch方法触发

store.dispatch('increment')

action异步操作

actions:{
  incrementAsyns({commit}){
    setTimeOut(()=>{
      commit('increment')
    },1000)
  }
}

Actions同样支持载荷

store.dsipatch('increment',{
  amount: 10
})

//对象形式分发
store.dispatch({
  type: 'incrmennt',
  amount: 10
})

在组件中分发Action

与mutation差不多

五、module

Vuex允许我们将store分割成模块

const moduleA = {
  state: ..,
  mutations: ..,
  actions: ..,

}
const moduleB = {..}
const moudleC = {..}
...

模块内部action 局部状态通过·context.state暴露出来,根结点通过context.rootState

const moduleA = {
  actions: {
    incrementIfOnRootSum({state.commit,rootState}){
      if((state.count+rootState.count)%2===1){
        commit('increment';)
      }
    }
  }
}

同样getters中根节点状态通过rootState暴露出来,