一、vuex解决的问题以及使用场景

  • 组件开发中头疼的问题
    • 数据一般都在父组件加载，向子组件传递，当出现跨多层级数据传递的时候，相对麻烦
  • 状态是什么
    • 应用于各组件、各模块之间的公共数据
    • 多段代码的使用的公共变量抽取出来，用于判断执行的逻辑
  • 状态数据的两个特点
    • 数据共享
    • 数据的变更将导致影响的产生
  • Vuex状态管理
    • image.png
    • Vuex是一个专为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规格保证状态
    • 状态集中式管理
      • 将多个组件中的公共数据，单独抽取到一个公共对象内进行存储，并且这个公共存储对象是一个单例
    • 实现公共状态的响应式编程
      • state的变化导致引用该状态的视图组件view也发生变化

  • 使用场景

    • 单页面应用组件规模较大的时候看，出现大量的组件之间有数据通信的时候
    • Vue组件之间出现数据传递及响应式编程困难时
    • Vue多组件依赖同一个状态，不同的视图行为需要改变同一状态的时候

      二、vuex的第一个例子

  • Vuex插件的安装

    • 添加vuex的依赖： “vuex”: “^3.6.2”
    • src下创建store文件，引入Vuex并使用
      • image.png

  • 计数器组件基础代码

    • 需求：需要实现在两个组件中数据的一致性
    • 实现:
      • 方法一：
        • 在store的state中声明全局data：counter
        • 页面使用
          1. <div>计数值:{{ $store.state.counter }}</div>

          三、mutations的使用与状态跟踪

  • mutations的作用

    • 直接对$store.state的状态进行赋值，可以实现响应式的
    • 但是无法对状态进行跟踪，只能看到状态的结果
    • mutation是实际上对state状态进行操作的自定义方法，通过触发mutations方法修改stateke可以留痕
    • mutation自定义方法里面必须进行同步操作

  • mutations带参数

    • mutations中声明的方法,只能携带一个参数，需要使用多个参数时，使用payload对象声明

      1. mutations基本使用
      2. add(state) {
      3.    state.counter++;
      4. },
      5. sub(state) {
      6.    state.counter--;
      7. }
      9. mutations携带参数
      10. add(state, num) {
      11.    state.counter += num;
      12. },
      13. sub(state, num) {
      14.    state.counter -= num;
      15. }
      17. mutations携带多个参数-payload
      18. add(state, payload) {
      19.    state.counter += payload.num * payload.multiple;
      20. },
      21. sub(state, payload) {
      22.    state.counter -= payload.num * payload.multiple;
      23. }

      四、全局计算属性getters

  • getters相当于全局的计算属性，可以对state中声明属性进行读取

    • image.png

      五、vuex状态异步操作

  • mutations中只能声明同步的方法，vuex需要进行异步操作时，需要在actions中声明，返回一个Promise对象

    • promise出现的目的一为处理JavaScript里的异步，再就是避免回调地狱。
    • promise有三种状态：pending/reslove/reject 。pending就是未决，resolve可以理解为成功，reject可以理解为拒绝。

      六、modules模块划分

  • modules划分的意义

    • 模块很多时，减少store的臃肿
  • 如何组织modules代码
    • image.png
  • 模块外部引用模块内的状态
    • 模块A的定义
      • image.png
    • 模块外的引用
      • $store.state.a.counter
      • $store.state.a.commit
  • 模块内引用全局的状态
    • image.png