站点图标

为 Vue3 添加一个简单的 Store

2020-07-11折腾记录TypeScript / Vue / Vuex
本文最后更新于 410 天前,文中所描述的信息可能已发生改变

前言

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,于是便有了这篇文章。

效果

首先放下效果:


_31
<template>
_31
<div id="app">
_31
<img alt="Vue logo" src="./assets/logo.png" />
_31
<div>
_31
{{ count }}
_31
<button @click="addCount">+</button>
_31
</div>
_31
<div>
_31
{{ subCount }}
_31
<button @click="addSubCount">+</button>
_31
</div>
_31
<div>{{ arr1 }}</div>
_31
</div>
_31
</template>
_31
_31
<script lang="ts">
_31
import { defineComponent } from "vue";
_31
import { useAction, useState } from "@/store";
_31
_31
export default defineComponent({
_31
name: "App",
_31
setup() {
_31
const count = useState<number>("count");
_31
const addCount = useAction<Function>("addCount");
_31
const subCount = useState<number>("sub.count");
_31
const addSubCount = useAction("sub.addSubCount");
_31
const arr1 = useState<string>("arr.0");
_31
return { count, addCount, subCount, addSubCount, arr1 };
_31
}
_31
});
_31
</script>

可以看到风格非常像 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 的部分:


_14
import { reactive } from "vue";
_14
_14
// 使用 reactive 函数完成响应式转换
_14
const state = reactive({
_14
count: 1,
_14
sub: {
_14
count: 2
_14
},
_14
arr: ["arr1", "arr2"]
_14
});
_14
_14
// 由于使用了 TypeScript,光有数据还不行,还需要有类型,利用 typeof 可以很方便的获取对象的类型
_14
export type State = typeof state;
_14
export default state;

然后是 Actions:


_16
import state from "@/store/state";
_16
_16
const actions = {
_16
addCount() {
_16
state.count++;
_16
},
_16
sub: {
_16
addSubCount() {
_16
state.sub.count++;
_16
}
_16
}
_16
};
_16
_16
// 同样需要导出类型
_16
export type Actions = typeof actions;
_16
export default actions;

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


_77
import state, { State } from "@/store/state";
_77
import actions, { Actions } from "@/store/actions";
_77
import { WritableComputedRef } from "@vue/reactivity";
_77
import { computed } from "vue";
_77
_77
// 函数的方式获取值的参数类型
_77
type useStateGetterFn = <R>(state: State) => R;
_77
// 函数的方式获取值和设置值的参数类型
_77
type useStateWritableFn<R> = {
_77
get: (state: State, ctx?: any) => R;
_77
set: (state: State, value: R) => void;
_77
};
_77
// 函数的方式获取 Action 的参数类型
_77
type useActionFn = (actions: Actions) => any;
_77
_77
// 获取 Store
_77
export const useStore = (): { state: State; actions: Actions } => {
_77
return { state, actions };
_77
};
_77
_77
// 获取 State
_77
export function useState<R>(
_77
key: string | useStateGetterFn | useStateWritableFn<R> | null = null
_77
): WritableComputedRef<R> {
_77
// 如果未传参代表获取全部的 state
_77
if (key === null) {
_77
// 将 state 包装成计算属性
_77
return computed(() => state as any as R);
_77
}
_77
// 函数方式获取 const count = useState(() => state.count)
_77
if (typeof key === "function") {
_77
// 将 state 传入函数,然后将函数返回值包装成计算属性
_77
return computed(() => key(state));
_77
}
_77
// 字符串或点语法方式获取和设置
_77
if (typeof key === "string") {
_77
let result = state as any;
_77
const keys = key.split(".");
_77
const lastKey = keys.pop() as string;
_77
for (const k of keys) {
_77
result = result[k];
_77
// 如果 result 为 null 了说明 key 设置错误,抛出异常
_77
if (result === null || result === undefined) {
_77
throw Error(`key is error [${key}]`);
_77
}
_77
}
_77
// 包装 set 和 get
_77
return computed({
_77
get: (ctx) => result[lastKey],
_77
set: (v) => (result[lastKey] = v)
_77
});
_77
}
_77
// 函数的方式,传入了 set 和 get,则将其包装成带 set 的计算属性
_77
return computed({
_77
get: (ctx) => key.get(state, ctx),
_77
set: (v) => key.set(state, v)
_77
});
_77
}
_77
_77
// 获取 Action,类似于 useState
_77
export function useAction<A>(key: string | useActionFn | null = null): A {
_77
if (key === null) {
_77
return actions as any as A;
_77
}
_77
if (typeof key === "string") {
_77
let result = actions as any;
_77
const keys = key.split(".");
_77
for (const k of keys) {
_77
result = result[k];
_77
if (result === null || result === undefined) {
_77
throw Error(`key is error [${key}]`);
_77
}
_77
}
_77
return result;
_77
}
_77
return key(actions);
_77
}

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

使用

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

结语

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

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

为 Vue3 添加一个简单的 Store

https://blog.ixk.me/post/add-simple-store-for-vue3
  • 许可协议

    BY-NC-SA

  • 发布于

    2020-07-11

  • 本文作者

    Otstar Lin

转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!

从零实现一个 PHP 微框架 - 初始化请求从零实现一个 PHP 微框架 - 服务提供者