vuex学习笔记

什么是vuex?
vuex是一个专门为vue.js设计的集中式状态管理架构，关于状态的理解就是在data中的属性需要共享给其他vue组件使用的部分。
vuex组成:state(存放的数据状态）、getters(对state中的状态进行过滤处理)、mutations（写有修改数据的逻辑）、actions（提交的是mutation，而不是直接变更状态)。

以下是各个模块的具体介绍：

state
vuex提供一个仓库，state用来存放数据源，对应于一般vue对象里面的data(还有对应于actions和mutations对应于methods)。

响应式存储：state里面存放的数据是响应式的，vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。

局部状态：（1）获取：在vue组件中获取数据最直接的方式是通过计算属性中获取。（2)组件仍然可以保存局部状态：可以把state放在组件自身，作为局部数据，专供此组件使用。

mapState(不是很懂??)
mapState的作用是把全局的state和getters映射到当前组件的computed计算属性中，this.$store.state。
使用方法：

import {mapState} from 'vuex'
export default{
  computer:
  mapState({
   count:state=>state.count,
     'count' //映射this.count为store.state.count
   })
}

getters
在store仓库中，state用来存放数据，如果要对数据进行处理输出，可以写到计算属性中，当很多组件都需要使用处理后的数据，我们就可以把数据抽离出来共享，这就是getters存在的意义。
使用方法：在store中定义getters,第一个参数是state

    const getter={style:state=>state.style}

使用方法：

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

mutation
vuex中store数据改变的唯一方法是mutation。通俗的理解就是mutations里面装着一些改变数据方法的集合，把处理数据逻辑方法放在mutations里面，使得数据和视图分离。
使用方法：
mutations结构：每个mutation都有一个字符串类型的事件类型(type)和回调函数(handler),首先注册事件，当触发响应类型的时候调用handler()，调用type的时候需要用到store.commit()方法。

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

store.commit('increment')//调用type，触发handler(state)

commit:提交可以在组件中使用this.$store.commit('xxx')提交mutation。

action
action提交的是mutation，而不是直接变更状态；action可以包含任意异步操作。它可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，但还是通过mutation来操作。
使用：定义actions

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

module
module可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，方便管理。
怎么用module?

const moduleA={
  state:{...},
  mutations:{...},
  actions:{...},
}
const moduleB={
  state:{...},
  mutations:{...},
  actions:{...}
}
const store=new Vuex.Store({
   modules:{
     a:moduleA,
     b:moduleB
   }
})

关于命名空间：如果想要模块具有更高的封装度和复用性，可以通过添加namespaced:true的方式使其成为带命名空间的模块。