Vuex核心概念

Jeremy_ht
39 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

State

  • 单一状态树
    • 英文名称是Single Source of Truth，也可以翻译成单一数据源。
    • 在国内我们有很多的信息需要被记录，比如上学时的个人档案，工作后的社保记录，公积金记录，结婚后的婚姻信息，以及其他相关的户口、医疗、文凭、房产记录等等（还有很多信息）。
    • 所以Vuex也使用了单一状态树来管理应用层级的全部状态。
    • 单一状态树能够让我们最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

Getters

  • 需要从store中获取一些state变异后的状态，比如下面的Store中： 获取学生年龄大于20的个数。
const store new Vuex.Store({
state:{
    students: [
        {id:110,name:'张三',age:38},
        {id:111,name:'李四',age:22},
        {id:112,name:'王五',age:51},
        {id:113,name:'赵六',age:31},
    ]
}
})
  • 在Store中定义getters
computed:{
    getGreaterAgescount(){
        return this.Sstore.state.students.filter(age =age >20).length
    }
}

computed:{
    getGreaterAgescount(){
        return state.students.filter(age =age >20).length
    }
}

Mutation

  • Vuex的store状态的更新唯一方式：提交Mutation
  • Mutation主要包括两部分：
    • 字符串的事件类型（type）
    • 一个回调函数（handler）,该回调函数的第一个参数就是state。
mutations:{
    increment(state){
        state.count++
    }
}
  • 通过mutation更新
increment(state){
    this.$state.commit('increment')
}
  • 在mutation中, 我们定义了很多事件类型(也就是其中的方法名称).
  • 当我们的项目增大时, Vuex管理的状态越来越多, 需要更新状态的情况越来越多, 那么意味着Mutation中的方法越来越多.

Action

  • 不要再Mutation中进行异步操作.
  • 但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?
  • Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.
  • context是什么?
    • context是和store对象具有相同方法和属性的对象.
    • 也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.
actions:{
    increment(state){
        context.commit('increment')
    }
}
  • Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch
methods:{
    increment(){
        this.$store.dispatch('increment')
    }
}
  • 支持传递payload
methods:{
    increment(){
        this.$store.dispatch('increment'， { count: 5})
    }
}

Module

  • Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
  • 当应用变得非常复杂时,store对象就有可能变得相当臃肿.
  • 为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等
avatar
文章
阅读
粉丝