Vuex核心概念的简单理解

目录

Vuex核心概念

（一）State-单一状态树的简单理解：在一个项目中只建一个store

（二）getter的基本使用

（三）mutation同步操作

mutation状态更新

mutation提交风格

mutation响应规则

 mutation类型常量

actions

---

Vuex核心概念

• State
• Getters
• Mutation
• Action
• Module

（一）State-单一状态树的简单理解：在一个项目中只建一个store

Single Source of Truth ：单一数据源

eg：系统不统一造成的信息的分散可能会带来麻烦：要求去各种系统找各种信息。低效且不方便管理。消耗大量的人力物力。

1. Vuex推荐只使用一个状态，即使你有很多信息。这样方便管理和维护。所以使用单一状态树来管理应用层级的全部状态。
2. 单一状态数能够让我们最直接的找到某个状态的片段，而且在之后的调试和维护过程中也非常方便。

（二）getter的基本使用

和计算属性很像

将变量做某种变化（如加减乘除运算等）后直接使用

getter默认不能传递参数，如果想传参使用，那么getters内部函数要返回一个带有参数的函数

moreAgeStu(state){//返回学生年龄大于传入值的学生对象
           // return function(age){
               // return state.students.filter(s=>s.age>age)
          //  }
  return age => {//推荐这种写法，阅读性强
                return state.students.filter(s => s.age > age)
            }
        }

简单来讲就是有一些数据必须经过变化才能使用时候，在getters中定义变化的函数，默认传入state对象，在函数内部写好要实现的功能，在Vue实例中直接通过（$store.getters.函数名）即可拿到属性

（三）mutation同步操作

mutation状态更新

mutation主要包括两部分：

1. 字符串的事件类型
2. 一个回调函数（handler），该回调函数的第一个参数就是state

mutation的定义方式：

mutations:{
    increment(state){
        state.count++;
    }
}

通过mutation更新：

 increment:function() {
    this.$store.commit('increment')//传入的是事件类型
}

从vue实例methods中添加方法，传入mutation，然后返回结果

• 在通过mutation更新数据的时候，有可能我们希望携带一些额外的参数，比如添加学生对象，对数字的自定义加减等等，可以在传给mutation值时在后面跟上要添加的数据
  • 参数被称为mutation的载荷（Payload）
• 若要添加的参数不是一个，一般以对象的形式传递，也就是payload是一个对象，这个时候可以再从对象中取出相关的信息

例如添加一个学生：

 //App.vue
addStudent() {
      const stu={id:4,name:"李",age:40}
      this.$store.commit("addStudent",stu)
    }

//index.js中的mutations
addStudent(state, stu) {
            this.state.students.push(stu);

        }

mutation提交风格

• 上面的commit进行提交只是一种普通的方式
• Vue还提供了另外一种风格，他是一个包含type属性的对象

  //普通提交方式
this.$store.commit("addStudent",payload)
//特殊提交方式
      this.$store.commit({
        type: "addStudent",//事件类型,
        count:count

      })

mutation响应规则

响应式系统会自动监听属性的变化，当属性发生变化时，会通知所有界面中用到该属性的地方，让界面发生刷新，但要求属性必须在响应式系统中初始化

1. 修改在响应式系统中的属性：直接修改
2. 要添加一个在响应式系统中不存在的属性：不能直接添加，它不具有响应式，要用Vue.set()新增一个属性
3. 删除响应式属性：delete state.对象.属性

mutation类型常量

        mutation中定义了很多事件类型（方法名称），方法过多时，可能会出现写错的情况，建议封装成一个常量导入引用

（四）action

action类似于Mutation，但是是用来替代Mutation进行异步操作的。