小白学习vuejs-21

TheWQ
71 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

自学前端

  • 前文
    • 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
    • 介绍本次学习的是vuex相关知识
    • 这是基于我学习的笔记而来的文章
    • backend: 后端 frontend: 前端

Getters基本使用

  • 有时候, 我们需要从store中获取一些state变异后的状态, 比如下面Store中:
  • getters.png

Getters作为参数和传递参数

  • 如果我们已经有了一个获取所有年龄大于20岁学生列表的getters, 那么代码可以这样来写
  • getters2.png
  • getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数
    • 比如上面的案例中, 我们希望根据ID获取用户的信息
    • getters3.png

Mutation状态更新

  • Vuex的store状态的更新唯一方式: 提交Mutation
  • Mutation主要包括两部分:
    • 字符串的事件类型(type)
    • 一个回调函数(handler), 该回调函数的第一个参数就是state.
  • mutation的定义方式:

  • mutation: {

    increment(state) {

    state.count++

}

    }

  • 通过mutation更新

  • increment: function() {

    this.$store.commit('increment')

    }

Mutation传递参数

  • 在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数
    • 参数被称为是mutation的荷载(Payload)
  • Mutation中的代码

  • incrementCount(state, count) { state.counter += count; }, addStudent(state, stu) { state.students.push(stu); },

  • 单数参数不是一个呢?
    • 比如我们有很多参数需要传递
    • 这个时候我们通常会以对象的形式产地, 也就是payload是一个对象
    • 这个时候可以再从对象中取出相关的信息

    • addStudent(state, stu) { state.students.push(stu); },

      addStudent() { const stu = { id: 114, name: 'alan', age: 35 }; this.$store.commit('addStudent', stu); },

Mutation响应规则

  • Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新
  • 这就要求我们必须遵守一些Vuex对应的规则:
    • 提前在store中初始化好所需的属性
    • 当给state中对象添加新属性时, 使用下面的方式:
      • 方式一: 使用Vue.set(obj, 'newProp', 123)
      • 方式二: 用新对象给旧对象重新赋值
  • 我们来看一个例子:
    • 当我们点击更新信息时, 界面并没有发生对应改变
    • mutation3.png
  • 如何才能让它改变呢?
    • 查看下面代码的方式一和方式二
    • 都可以让state中的属性是响应式的
    • mutation4.png

后记

  • 希望对对前端有兴趣的朋友们有帮助
  • 这篇文章主要是关于vuex的, 希望大家喜欢
  • vue的作者是中国人尤雨溪, 非常厉害的人
avatar
文章
阅读
粉丝