vuex学习笔记

VUEX

是一个状态管理模式，可以集中式存储和管理组件的状态。

组件使用store里面的state作数据展示，通过dispatch action来处理异步业务逻辑，然后commit mutations处理同步业务逻辑并且更新state。

Store

const store = {
  state,
  mutaions,
  getters,
  actions,
  modules
}

State

通过在跟组件中注册store，即new Vue({store})，该store实例会注入到根组件下的所有子组件中，子组件通过this.$store.state去访问属性。

// 可以通过mapState来帮我们生成计算属性
import { mapState } from 'vuex'
export default {
  computed:{
    aaa,
    // 自己本来有computed的属性
    ...mapState({
      count:state => state.count,
      // 也可以传 'count' 等同于 'state => state.count'
      'count'
    }),
    ...mapState([
      'xxx',
      'yyy'
    ])
  }
}

Getters

当多个组件需要一种清洗和过滤后的数据的时候，可以编写getters，即处理数据格式的一种方法。

// 定义一个getters，里面有个sum
const getters = {
  // 也可以接收一个getters作为参数
  sum:( state,getters ) => {
    return state.a + state.b;
  }
}

// 使用getters
computed:{
  // 同样使用拓展运算符将 getters 混入 computed 对象中
  xxx,
  ...mapGetters([
    'aaa',
    'bbb'
  ])  
}

Mutations

更改Vuex中的state状态的唯一方法是commit mutation，然后在mutation中操纵state改变状态。

// 定义
const mutations = {
  // 可以传入额外的参数n
  [ADD](state,obj){
    state.count += obj.n;
  }
}

// 一般使用常量替代 mutation 事件类型
const ADD = 'ADD'

//调用,type对应方法名， 或者commit('add',10)
store.commit({
  type:'add',
  n:10
}) 

mutation必须是同步函数，也就是说所有异步请求应该都放在action中

// 使用
export default {
  methods:{
    ...mapMutations([
      // 映射 this.aaa() 为 this.$store.commit('aaa')
      'aaa'
    ])
  }
}

Action

action类似mutation，但是action是commit mutation，而不是直接改变状态，并且action可以进行异步操作。

const actions = {
  //这里需要注意，入参的context是一个modules，不是Store，有store实例的相同方法和属性
  aaa(context,n){
    // 在action中提交一个type为aaa的mutation
    context.commit({type:'mutation',n:n})
  }
}

// 调用
store.dispatch({type:'aaa',n:10}); //dispatch('aaa',n)

// 使用
export default {
  methods:{
    ...mapActions([
      // 映射 this.aaa() 为 this.$store.dispatch('aaa')
      'aaa'
    ])
  }
}

Modules

一个很大的单页项目，如果所有状态都集中在一个Store上，那么这个Store就会很大，所以将store分割模块，每个模块拥有自己的state,mutation,action,getters.

const moduleA = {
  state,
  actions,
  mutations
}
const moduleB = {
  state,
  actions,
  mutations
}

const Store = new Vuex.Store({
  modules:{
    moduleA,
    moduleB
  }
})

Store.state.moduleA // -> moduleA 的状态

规则

• 应用层级的状态应该集中到单个 Store 对象
• 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的
• 异步逻辑都应该封装到 action 里面
• 对大型项目，需要把 Vuex 相关代码分割到模块中