vuex异步操作、通信

Jeremy_ht
67 阅读3分钟

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

组件化开发

在现代 Web 开发复杂多变的需求驱动之下，组件化开发已然成为了事实上的标准

image.png

  • 组件化开发为我们带来了：
    • 更快的开发效率
    • 更好的可维护性

组件内的状态管理流程

每个组件都有自己的状态、视图和行为等组成部分。

new Vue({
  // state
  data() {
    return {
      count: 0
    };
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment() {
      this.count++;
    }
  }
});
  • state，驱动应用的数据源；
  • view，以声明方式将 state 映射到视图；
  • actions，响应在 view 上的用户输入导致的状态变化。

image.png

组件通信

然而大多数场景下的组件都并不是独立存在的，而是相互协作共同构成了一个复杂的业务功能。在 Vue 中为不同的组件关系提供了不同的通信规则。

image.png

多个组件状态共享

当我们的应用遇到多个组件共享状态时：

  • 多个视图依赖于同一状态
  • 来自不同视图的行为需要变更同一状态

最典型的场景就是购物车

  • 对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

  • 对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

  • 因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

  • 通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

Vuex 状态管理流程

无论是面试还是实际操作都是非常重要的。

image.png

  1. 在组件中 commit 调用 mutation
  2. 在 mutation 中修改 state 状态
    • 只有 mutation 中修改 state 才会反应到调试工具中
    • 注意：不要在 mutation 中执行异步操作修改 state
  3. state 状态发生改变，视图更新

异步操作

image.png

  1. 在组件中使用 dispatch 调用 action 函数

  2. 在 action 函数中执行异步操作

  3. action 函数中异步操作执行结束，提交 mutation

    • 注意：也不要在 action 中直接修改 state，调试工具工作有问题

  4. 在 mutation 中修改 state

    • 注意：也不要在 mutation 中执行异步操作修改 state，调试工具工作有问题
    • 只有 mutation 中修改 state 才能反应到调试工具中

  5. state 数据发生改变，视图更新

avatar
文章
阅读
粉丝