使用 Vue 3.0,你可能不再需要Vuex了

前端劝退师

共 2506字,需浏览 6分钟

 ·

2020-07-29 12:18


71613dc523ce9d314fc3400d19910054.webp

Vuex 是一个很棒的状态管理库。它很简单,并与 Vue 集成的非常好。为什么会有人放弃 Vuex ? 原因可能是即将发布的 Vue3 版本公开了底层的响应式系统,并介绍了构建应用程序的新方法。新的响应式系统非常强大,它可以直接用于集中的状态管理。

你需要状态共享吗?

在某些情况下,多个组件之间的数据流转变得非常困难,因此需要集中的状态管理。这些情况包括:

  • 多个组件使用相同数据的
  • 组件深嵌套

如果以上情况都不成立,答案很简单,你不再需要状态共享了。

但是,如果你有以上一种情况呢?最直接的答案就是使用 Vuex 。这是一个久经考验的解决方案,而且效果不错。

但是,如果你不想添加其他依赖项或发现设置过于复杂怎么办?新的 Vue3 版本以及 Composition API 可以通过其内置方法解决这些问题。

新的解决方案

共享状态必须符合两个条件:

  • 响应式:当状态改变时,使用它们的组件也应更新
  • 可用性:可以在任何组件中访问状态

响应式

Vue3 通过众多功能公开了其响应式系统。你可以使用 reactive 函数创建响应式变量(替代方法是 ref 函数)。

import { reactive } from 'vue';

export const state = reactive({ counter0 });

reactive 函数返回的 Proxy 对象是可以跟踪其属性更改的对象。在组件模板中使用时,当响应值发生更改时,组件都会重新渲染。