Vuex 总结

根据最近写的项目所用到的vuex，于是总结一番，毕竟好记性不如烂笔头

总述：vuex的核心就是state,getters,actions,mutations,module

1.state

state是根据项目的需求，自己定义的一个数据结构，里面可以放一些通用的状态，例如

const state ={
        flag:false,
        num:1
    } 
 //可以通过 this.$store.state.flag去获取 

mapState辅助函数：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余，mapState可以帮助我们生成计算属性

computed:{
  ...mapState({
    flag:state=>state.flag,
    num:1
    })  
}    

2.getters

getters从store的state中派生出一些状态，可以通俗的认为getter是函数vuex的计算属性，类似于computed函数

getters:{
    getFlag:state=>{
    return state.flag
    }
  }
//可以通过 this.$store.getters.flag 去获取

mapGetters辅助函数是将store中的getter映射到局部计算属性，如上vuex定义一个getter函数的getFlag，我们可以在vue文件的computed属性中进行引用

computed：{
   ...mapGetters{['getFlag']}
}    

3.mutations

更改vuex的store中的状态的唯一方法是提交mutations，mutations非常类似于事件：每个mutations都有一个字符串的事件类型（type）和一个回调函数（handler），这个回调函数就是我们实际进行状态更改的地方，并且会接受state作为第一个参数

mutations:{
   homeStatus(state){
    state.flag =!state.flag
     } 
 }
//可以通过store.commmit("homeStatus")去调用

不能直接去调用一个mutation handler，这个选项更像是事件注册：“当触发一个类型为homeStatus的mutation时，调用次函数”，要唤醒一个mutation handler，需要以相应的type调用store.commit方法

4.action

action类似于mutation，不同在于：action提交的是mutation，而不是直接变更状态

actions:{
  homeStatus(context){
    context.commit("homeStatus")
    }      
}
//可以通过store.dispatch('homeStatus') 去触发action

mapActions:可以使用其映射函数

methods:{
    ...mapActions{['homeStatus']}
}    

5.module

当项目比较大的时候，用于使用单一状态树，应用的所有状态会集中到一个比较大的对象，store对象会变得比较臃肿，这个时候可以将store分割成模块（module）

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