为 Vue3 添加一个简单的 Store
前言
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 的部分:
_14import { reactive } from "vue";_14_14// 使用 reactive 函数完成响应式转换_14const state = reactive({_14 count: 1,_14 sub: {_14 count: 2_14 },_14 arr: ["arr1", "arr2"]_14});_14_14// 由于使用了 TypeScript,光有数据还不行,还需要有类型,利用 typeof 可以很方便的获取对象的类型_14export type State = typeof state;_14export default state;
然后是 Actions:
_16import state from "@/store/state";_16_16const actions = {_16 addCount() {_16 state.count++;_16 },_16 sub: {_16 addSubCount() {_16 state.sub.count++;_16 }_16 }_16};_16_16// 同样需要导出类型_16export type Actions = typeof actions;_16export default actions;
接着就是最主要的部分了:
_77import state, { State } from "@/store/state";_77import actions, { Actions } from "@/store/actions";_77import { WritableComputedRef } from "@vue/reactivity";_77import { computed } from "vue";_77_77// 函数的方式获取值的参数类型_77type useStateGetterFn = <R>(state: State) => R;_77// 函数的方式获取值和设置值的参数类型_77type useStateWritableFn<R> = {_77 get: (state: State, ctx?: any) => R;_77 set: (state: State, value: R) => void;_77};_77// 函数的方式获取 Action 的参数类型_77type useActionFn = (actions: Actions) => any;_77_77// 获取 Store_77export const useStore = (): { state: State; actions: Actions } => {_77 return { state, actions };_77};_77_77// 获取 State_77export 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_77export 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许可协议
发布于
2020-07-11
本文作者
Otstar Lin
转载或引用本文时请遵守许可协议,注明出处、不得用于商业用途!