您真的需要Vuex吗?

2020年12月30日11:10:46 发表评论 177 次浏览

本文概述

Vue已被确立为主要的JavaScript框架。这是由于多种原因, 从流畅的开发人员经验到广泛的生态系统。 Vue的核心生态系统和工具特别令人钦佩, 这也使其有资格被称为成熟框架。

Vue具有强大的通用性, 但是, 这种新功能常常被新手和某些经验丰富的开发人员误解, 这些开发人员往往会包含许多工具, 因为他们认为"以后可能需要"。实际上, 并非总是需要这些工具。因此, 在添加工具之前了解它如何使我们受益是非常重要的, 否则它可能会变成一种劣势而不是有所帮助。

现在, 我们来看看Vue.js中的核心磁通库:Vuex。

Vuex是Vue.js中的状态管理系统。这是一个集中存储, 遵循严格的规则, 以帮助管理Vue应用程序中存在的所有组件的状态。

听起来非常重要。对?实际上, 它是一个功能强大的工具, 根据使用情况可能有用也可能没有帮助。

你为什么需要Vuex?

Vuex是一个状态管理系统。因此, 要了解Vuex的功能, 你首先应该对SPA中的状态概念以及状态与其他元素的相互作用有很好的了解。

动作,状态和视图具有循环关系

基本上, 状态是组件所依赖的数据。例如, 待办事项列表上的待办事项或博客上的帖子。此数据称为状态, 每个Vue组件都可以具有一个。

随着你的应用程序的增长, 组件的数量可能会大大增加。如果你不使用像Vuex这样的状态管理库, 则这些组件中的每个组件都将利用为此目的设计的Vue.js API来管理自己的状态。

Vue.js组件树

我们为制作了一个自定义演示.
不完全是。点击这里查看.

您真的需要Vuex吗?1

请记住, Vue保持了如上所示的树状组件架构, 并且还通过以下方式启用了父子通讯道具以及通过大事记。你可以想象, 如果两个遥远的兄弟组件需要对同一数据更改做出反应, 可能会非常困难-我们需要将数据从子级传递到父级, 直到到达最接近的祖先, 然后再从那个祖先传递到特定的子级(请参见上图中突出显示的组件)。

这非常费力且容易出错。

这正是Vuex出现的地方。Vuex进行抽象整个模块状态并将其保存在集中存储中的工作, 该状态遵循Vuex的状态管理模式并与你的组件进行通信。

这就是为什么它通常被称为"真理的唯一来源"。尽管Vuex就是这样的别名, 但这并不能改变组件仍然可以拥有自己的状态这一事实。你可以决定与其他组件共享这些状态。

在Vuex中与组件共享状态

现在你已经了解了为什么我们可能需要像Vuex这样的状态管理系统, 我们可以继续进行这个大胆的假设:只有两个主要因素决定你是否应该使用Vue管理状态。

应用程式大小

人们经常说"随着你的应用程序的发展, 你将需要Vuex"。实际上, 这取决于它的增长方式。你的应用程序可能会增长, 但你的数据流仍保持核心状态(即父子关系和亲子关系)。

最终, 你可以使用道具和事件来共享此数据, 而不必添加Vuex和附带的样板。

另一方面, 一旦你注意到你的组件需要一个抽象的数据源, 明智的做法是停止使用道具和事件并诉诸Vuex。这样可以节省大量时间, 因为切换到Vuex的时间越晚, 重构所需的时间就越多。

逻辑与数据复杂度

有时我们需要将某些复杂逻辑的实现与我们的组件分开, 尤其是当该逻辑与系统中的其他组件相关时。这种用例的一个很好的例子是身份验证。

Vuex是在Vue中处理复杂应用程序身份验证的一种流行方法。使用Vuex, 你可以处理令牌的可用性, 访问控制以及整个应用程序中的路由阻止。变异, 获取器和设置器可协助完成此任务。

通过这种模式, 你可以将身份验证逻辑与应用程序逻辑完全分开, 同时保持身份验证流可追溯并可以访问数据。

Vuex还简化了整个应用程序的单元测试, 如果你的应用程序变得越来越复杂, 使状态难以管理, 这可能会有所帮助。但是, 你无需使用Vuex就可以完全完成测试。

我到底什么时候需要Vuex?

这是Dan Abramov的一则有趣的话:

助焊剂库就像眼镜:你会在需要时知道它们。

这是一个非常真实的声明。但是, 有些人说可能太迟了, 你需要一个助焊剂库。不幸的是, 这将迫使你将复杂的流程引入到已经很复杂的应用程序中。

基于我在上面引用的两个主要因素(应用程序大小和数据复杂性), 我创建了这个小流程图, 以帮助开发人员从项目计划步骤中决定是否需要Vuex来增强其应用程序:

Vuex决策图

还有Vuex文档中的一部分简要说明了何时应该使用Vuex。

你为什么要跳过Vuex?

使用Vue-CLI创建新的Vue.js应用时, 它不会通过询问你是否需要状态管理系统来烦扰你。它只是不包括它。尽管Vue.js用途极为广泛, 但它的目标是变得平易近人, 并尝试使你的新项目尽可能简单。

人们避免使用Vuex的主要原因是Vuex很冗长。它必须是-它必须遵循一种模式, 以确保对状态的更改是故意发生的。以下是使用Vuex的基本待办事项组件, 而未使用的是:

比较有和没有Vuex的Todo组件

上面的代码显示了使用Vuex在一个非常简单的应用程序中管理状态时, 代码变得多么繁琐。在这种情况下, 最好跳过Vuex并使用道具和事件或另一种简单的状态管理模式。

如何在Vuex上跳过

在开发中小型应用程序时, 如果你不想陷入Vuex的冗长困扰, 则可以选择几种方法。其中一些方法要求你从头开始编写简单的状态管理, 而其他方法则需要使用3rd party库。你可以根据自己构建代码的方式来使用最适合自己的方法。

其他助焊剂库

使用Vuex以外的其他助焊剂库也不错。尽管它们可能达到相同的目的, 但它们的用法常常不同。与Vuex相比, 有些可能提供的样板更少, 这可能适合你的用例。

posva / pinia🍍使用带有DevTools支持的composition api为Vue自动键入, 模块化和轻量级商店– posva / pinia

hankchizljaw / beedle一个受Redux&Vuex启发的小型库, 可帮助你管理JavaScript应用程序中的状态– hankchizljaw / beedle

alexander-heimbuch / redux-vuex受Vuex启发的VueJS Redux绑定。 Redux和vuex真的很难比较。 Vuex是一种状态管理模式, 可以明确定义状态生命周期的每个主题。对于大多数项目, 这有助于你的应用程序的结构化, 但同时也会留下大量的体系结构。

andrewcourtice / harlem Vue 3的简单, 不受限制, 轻量级和可扩展的状态管理。看一下演示, 看看它的实际作用或在CodeSandbox中试用它。 Harlem有一个简单的功能性API, 用于创建, 读取和更改状态。

mediv0 / v-bucket NPM状态:by受Vuex启发, 使用成分API构建的Vue 3.0的快速, 简单和轻量级状态管理。运行示例:从NPM安装此软件包:$ npm install @ mediv0 / v-bucket或yarn:$ yarn add @ mediv0 / v-bucket首先, 你需要创建存储桶。

从零开始的助焊剂

我建议任何人都选择Vuex, 而不要遵循这种方法, 因为实际上, 你将最终重新创建Vuex。但是, 如果你需要"自定义"事实来源, 也可以使用Vue反应方法。

请记住, 要使其成为可靠的事实来源, 就应该仅在突变的基础上进行更改, 否则你将发现自己无法追踪的错误。

从零开始建立共享状态

Vue在其文档中提供了一个小指南帮助开发人员创建自己的集中式状态管理系统。

活动巴士

Vue还使你能够通过全局事件总线在整个应用程序中传递数据。你可以阅读本文以获取有关如何执行此操作的详细教程:https://blog.notlogy.com/using-event-bus-in-vue-js-to-pass-data-between-components/.

如果你使用的是Vue 3, 最好使用第三方库, 例如微型发射极or手套充当你的活动中心, 如docs.

合成API

Vue的composition API的动机是在Vue应用程序中实现更好的逻辑重用和代码组织。合成API在Vue中引入了模块化模式, 可让你灵活地组合组件的逻辑。

有了这种优雅的图案, 安德烈·加洛夫(Andrej Galuf), 可以将composition API用作商店。你可以编写一个以后将用作共享存储的功能。与Vuex可能带来的功能相比, 这将大大减少较小应用程序上的样板。

// @/services/counter.js
import { ref, computed } from '@vue/composition-api'
const count = ref(0)
export const getCount = computed(() => count.value)
export const increment = () => count.value += 1
// @/components/ComponentA.vue
<template>
    <div id="component-a">
        <button @click="increment()">Increment Counter</button>
    </div>
</template>

<script>
import { createComponent } from '@vue/composition-api'
import { increment } from '@/services/click-counter'

export default createComponent({
    setup() {
        return {
            increment
        }
    }
})
</script>
// @/components/ComponentB.vue
<template>
    <div id="component-b">
        Clicks: {{ getCount }}
    </div>
</template>

<script lang="ts">
import { createComponent } from '@vue/composition-api'
import { getCount } from '@/services/click-counter'

export default createComponent({
    setup() {
        return {
            getCount
        }
    }
})
</script>

外挂程式

Vuex还具有可帮助简化样板的插件。例如, 我们有Vuex-pathify插件, 它可以帮助你在不使用getters属性的情况下访问状态下的深层属性-你可以使用路径来进行操作。例如, 你可以使用products@items.0.name。 Vuex pathify还使你可以通过单个路径设置突变。

davestewart / vuex-pathify Pathify使用基于状态的声明性基于路径的语法, 使使用Vuex变得容易:路径可以引用任何模块, 属性或子属性:Pathify的目的是通过抽象化Vuex的复杂性来简化整个Vuex开发体验设置并依赖手动编写的代码。

总结

毫无疑问, Vuex是一款出色的工具。然而, 强大的力量伴随着巨大的责任。这些职责之一是了解其功能, 并决定是否使用它, 而要以拥有更复杂的代码库为代价。

Vue的事件和道具数据通信模式非常适合大多数简单的应用程序。如果我们添加Vuex, 这些应用程序将变得更加复杂。此外, Vue.js还提供了很棒的工具, 例如composition API和顶级反应性, 它们可以比Vuex更好, 更简单地完成这项工作。

下次当你处理很棒的Vue项目时, 请确保在添加之前确实需要Vuex。

准确体验用户的Vue应用程序

调试Vue.js应用程序可能会很困难, 尤其是在用户会话中有数十种甚至数百种变体的情况下。如果你有兴趣监视和跟踪生产中所有用户的Vue突变,

尝试notlogy

.

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭就像Web应用程序的DVR一样, 实际上记录了Vue应用程序中发生的所有事情, 包括网络请求, JavaScript错误, 性能问题等等。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。

notlogy Vuex插件将Vuex突变记录到notlogy控制台, 为你提供导致错误的原因以及发生问题时应用程序处于何种状态的上下文。

现代化调试Vue应用程序的方式-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: