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

效果

首先放下效果：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      {{ count }}
      <button @click="addCount">+</button>
    </div>
    <div>
      {{ subCount }}
      <button @click="addSubCount">+</button>
    </div>
    <div>{{ arr1 }}</div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import { useAction, useState } from "@/store";

  export default defineComponent({
    name: "App",
    setup() {
      const count = useState<number>("count");
      const addCount = useAction<Function>("addCount");
      const subCount = useState<number>("sub.count");
      const addSubCount = useAction("sub.addSubCount");
      const arr1 = useState<string>("arr.0");
      return { count, addCount, subCount, addSubCount, arr1 };
    },
  });
</script>

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      {{ count }}
      <button @click="addCount">+</button>
    </div>
    <div>
      {{ subCount }}
      <button @click="addSubCount">+</button>
    </div>
    <div>{{ arr1 }}</div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import { useAction, useState } from "@/store";

  export default defineComponent({
    name: "App",
    setup() {
      const count = useState<number>("count");
      const addCount = useAction<Function>("addCount");
      const subCount = useState<number>("sub.count");
      const addSubCount = useAction("sub.addSubCount");
      const arr1 = useState<string>("arr.0");
      return { count, addCount, subCount, addSubCount, arr1 };
    },
  });
</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 的部分：

import { reactive } from "vue";

// 使用 reactive 函数完成响应式转换
const state = reactive({
  count: 1,
  sub: {
    count: 2,
  },
  arr: ["arr1", "arr2"],
});

// 由于使用了 TypeScript，光有数据还不行，还需要有类型，利用 typeof 可以很方便的获取对象的类型
export type State = typeof state;
export default state;

import { reactive } from "vue";

// 使用 reactive 函数完成响应式转换
const state = reactive({
  count: 1,
  sub: {
    count: 2,
  },
  arr: ["arr1", "arr2"],
});

// 由于使用了 TypeScript，光有数据还不行，还需要有类型，利用 typeof 可以很方便的获取对象的类型
export type State = typeof state;
export default state;

然后是 Actions：

import state from "@/store/state";

const actions = {
  addCount() {
    state.count++;
  },
  sub: {
    addSubCount() {
      state.sub.count++;
    },
  },
};

// 同样需要导出类型
export type Actions = typeof actions;
export default actions;

import state from "@/store/state";

const actions = {
  addCount() {
    state.count++;
  },
  sub: {
    addSubCount() {
      state.sub.count++;
    },
  },
};

// 同样需要导出类型
export type Actions = typeof actions;
export default actions;

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

import state, { State } from "@/store/state";
import actions, { Actions } from "@/store/actions";
import { WritableComputedRef } from "@vue/reactivity";
import { computed } from "vue";

// 函数的方式获取值的参数类型
type useStateGetterFn = <R>(state: State) => R;
// 函数的方式获取值和设置值的参数类型
type useStateWritableFn<R> = {
  get: (state: State, ctx?: any) => R;
  set: (state: State, value: R) => void;
};
// 函数的方式获取 Action 的参数类型
type useActionFn = (actions: Actions) => any;

// 获取 Store
export const useStore = (): { state: State; actions: Actions } => {
  return { state, actions };
};

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

// 获取 Action，类似于 useState
export function useAction<A>(key: string | useActionFn | null = null): A {
  if (key === null) {
    return actions as any as A;
  }
  if (typeof key === "string") {
    let result = actions as any;
    const keys = key.split(".");
    for (const k of keys) {
      result = result[k];
      if (result === null || result === undefined) {
        throw Error(`key is error [${key}]`);
      }
    }
    return result;
  }
  return key(actions);
}

import state, { State } from "@/store/state";
import actions, { Actions } from "@/store/actions";
import { WritableComputedRef } from "@vue/reactivity";
import { computed } from "vue";

// 函数的方式获取值的参数类型
type useStateGetterFn = <R>(state: State) => R;
// 函数的方式获取值和设置值的参数类型
type useStateWritableFn<R> = {
  get: (state: State, ctx?: any) => R;
  set: (state: State, value: R) => void;
};
// 函数的方式获取 Action 的参数类型
type useActionFn = (actions: Actions) => any;

// 获取 Store
export const useStore = (): { state: State; actions: Actions } => {
  return { state, actions };
};

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

// 获取 Action，类似于 useState
export function useAction<A>(key: string | useActionFn | null = null): A {
  if (key === null) {
    return actions as any as A;
  }
  if (typeof key === "string") {
    let result = actions as any;
    const keys = key.split(".");
    for (const k of keys) {
      result = result[k];
      if (result === null || result === undefined) {
        throw Error(`key is error [${key}]`);
      }
    }
    return result;
  }
  return key(actions);
}

由于只简单弄了一下，并没有添加 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
本文作者
Otstar Lin
发布于
2020/06/11

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