为 Vue3 添加一个简单的 Store

Otstar Lin

前言

Vue 3.0 挺早就已经发布了 Beta 版本,一直没有机会尝试下。主要是最近在折腾后端,前端几乎没再碰过。现在 XK-Java 已经大致写完了,最近应该也不会添加太多的功能了,XK-PHP 也打算等到 Swoole 支持 PHP8 的时候重构一波,所以比较闲,便打算翻出以前的项目(XK-Note,XK-Editor)重构(重写)一下。

由于 Vue 2.x 对 TypeScript 的支持性不好,所以便打算直接使用 Vue 3.0,顺便体验一把函数化组件。因为 XK-Editor 需要使用 Store 来管理状态,而之前的并不太适合 Vue 3.0,于是便有了这篇文章。

效果

首先放下效果:

可以看到风格非常像 React Hook,而且使用起来也很方便,可以通过像 Laravel 的 data_get 一样的点语法来获取到嵌套的 state,同时由于数据是响应式的,同时也可以直接设置值,而不需要另外增加一个 set 方法来设置。当然也不一定需要使用点语法,你也可以像之前的 Vuex 2 的 mapState 一样使用函数的方式获取 state。支持泛型,可以很好的保持 TypeScript 的特性和优点。

分析

Store 相关的分析这里就不说明了,本文只介绍 Store 用到的 Vue 3.0 新增的特性。

首先就是最重要的 reactive 函数,这是在 Vue 3 新增的函数,用来将普通的数据转换成响应式数据,替代了 Vue 2.x 中的 Vue.observable

然后就是 computed 函数,computed 函数对应着 Vue 2.x 的计算属性,由于 Vue 3 不再是 Vue 2.x 的 Options API(虽然依旧可以用)而是采用了和 React Hook 类似的 Composition API,这意味着,我们可以在任何的地方使用 Composition API,而不再局限于组件内。之所以要用到这个函数的原因是外部的响应式数据无法在组件中直接使用,会导致不更新的情况发生,所以需要一层计算属性来解决这种问题,在 Vue 2.x 也存在这个问题。

实现

首先我们先创建 State 的部分:

然后是 Actions:

接着就是最主要的部分了:

由于只简单弄了一下,并没有添加 debug 的部分,由于 Vue 不像 React 一样使用不可变数据,所以无法简单的获取旧值,必须要深克隆一份才能保证旧值不随新值变化,这里就不弄了(逃。

使用

使用的方式上面已经展示过了,这里就不展示了。

结语

Vue 3.0 添加了 Composition API 后编码就不会再像 Vue 2.x 那样为了一个方法满屏幕找的情况了,各种逻辑都可以集中在一个区域里,同时也和 React Hook 一样,可以很方便的利用各种 use 函数扩展功能。响应式也改成用 Proxy,应该不会再遇到各种丢更新的情况了。

Vue 3 香,不过我还是更喜欢 React(逃