前言

vue的新一版本vue3中采用了typescript对主项目vue vue-router进行了重写,同作为vue全家桶的状态管理插件vuex并没有被重写,只是在原基础上进行了优化

作为一个练手的小项目,最近用typescript对vuex进行了重写,重写项目可以点击查看,除了实现基本常用的功能外,添加了更适用于vue-next中setup写法的hooks api,下面将hooks的设计思想分享给大家

为什么会有hooks api呢

当一个项目的模块module很多的时候,出于避免命名冲突考虑,我们会使用到命名空间namespaced选项

当命名空间复杂起来的时候,我们在读取状态值和修改状态值的方法上也会复杂

所以vuex3.x中提供了诸如mapState mapActions等方法来使写法更简单

但在vuex4.x的使用中,我们发现这几个api仅仅是对老版本进行了兼容,并没有对setup进行支持

官方的demo也是直接在属性上进行了值的读取

所以我们能不能提供一个api让读取像mapState mapActions那样简单一点呢

答案肯定是可以的

Api

等同于 mapState mapGetters mapMutations mapActions

我们提供对应的四个 useState uesGetters useMutations useActions来进行读取

api对应的用法也是类似的

我们拿mapState来举列

这是官方提供的mapState的用法

import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}

我们如果用hooks去写

const app = createApp({
  setup() {
    // state1.count = store.state.count
    const state1 = useState(['count']);
    
    // state2.countAlias = store.state.count
    const state2 = useState({
      // 换个属性名
      countAlias: 'count'
    });
    
    // 命名空间 state3.test = store.state.inner.count
    const state3 = useState('inner', ['count']);
    
    // 命名空间另外的写法 state4.test4 = store.state.inner.count
    const state4 = useState({
      test4: 'inner/count'
    });
    
    // 函数写法 state5.test5 = store.state.count
    const state5 = useState({
      test5: (state) => {
        return state.count;
      }
    });

    return () => h('div');
  }
});

可以看到hooks的写法和map的写法是类似的,而且都比上面贴的图里的demo要友好很多

其他几个hooks也和老版本的map api函数保持一致

我们再看几个其它hooks的最简单的写法

const store = createStore({
  modules: {
    inner: {
      namespaced: true,
      state: {
        test: 1
      },
      getters: {
        foo(state) {
          return state.test + 1;
        }
      },
      mutations: {
        change(state, num) {
          state.test = num;
        }
      },
      actions: {
        async delayChange({ commit }, num) {
          await new Promise((resolve) => {
            const timer = setTimeout(() => {
              clearTimeout(timer);
              resolve();
            }, 100);
          });
          commit('change', num);
        }
      }
    }
  }
});
const app = createApp({
  setup() {
    // state.test = store.state.inner.test
    const state = useState('inner', ['test']);
    // getters.foo = store.getters.inner.foo
    const getters = useGetters('inner', ['foo']);
    // mutations
    const { change } = useMutations({
      change: 'inner/change'
    });
    // actions
    const { delayChange } = useActions('inner', ['delayChange']);

    return () => h('div');
  }
});
app.use(store);
app.mount(document.createElement('div'));

即便你没用过hooks api但也能看得出vuex3.x中map api的影子

typescript设计

同样的我们通过useState这个hooks进行举例,其他的hooks与这个基本是类似的设计思想

基础的模型

function useState(a: any) {
  return a;
}

const state = useState({
  a: 'a'
});

以上便是一个最基础的hooks模型

显然这个类型返回是不合适的,这里的state返回值是any,我们想要的肯定是在state上能够读取到a这个属性

用泛型解决any

ts中的泛型可以解决这个毛病

function useState<T>(state: T) {
  return state;
}

const state = useState({
  a: 'a'
});

这么自动推导出来state.a就存在了

不过这里的写法仍然是有问题的

state.a推出来是字符串a的类型string并不是state.a的真实值,所以我们需要在优化一下

更准确的推导

我们在自动推导的情况下这里是没法拿到state.a的真实值的,所以我们需要将state.a返回值设置为any

function useState<T>(
  state: T
): {
  [x in keyof T]: any;
} {
  return state;
}

const state = useState({
  a: 'a'
});

我们通过[x in keyof T]拿到对应的属性值,并把对应的属性返回值设置为any,这样一来就解决了上面的问题

手动指定泛型

自动推导能推的类型只能帮助我们拿到最后结果的属性

当我们明确知道state.a的属性值类型时,我们需要手动指定泛型T的值

const state = useState<{
  a: number    
}>({
  a: 'a'
});

我们希望上面读取state.a的结果是number类型

我们这里指定的泛型是函数结果的返回类型,并不是函数参数的类型,所以我们得改两个位置

function useState<T>(
  state: {
    [x in keyof T]: string;
  }
): {
  [x in keyof T]: T[x];
} {
  const obj = Object.create(null);
  obj.a = 1;
  return obj;
}

对于函数的参数类型,只有属性是与之对应的,属性值应该永远是字符串类型

对于函数的返回值类型,属性和属性值类型都是对应的

现在让我们再来看看手动指定泛型对应的结果

const state = useState<{
  a: number;
}>({
  a: 'a'
});

可以看到state.a被正确推导为number类型

同样的我们来看看自动推导的结果

const state = useState({
  a: 'a'
});

可以看到结果被推导为了unknown

首先解释下为什么会是unknown

泛型的自动推导得是在这个泛型被函数参数用上时

比如下面这个列子

function foo<T>(a: T) {
  return a;
}

const res = foo({
  a: 1
});

这里的res就能自动推导为对应的预期结果

我们上面的函数参数可以看到我们只通过[x in keyof T]用上了对应的属性,值是被永久设置为了string,我们并没有在此处用上对应泛型的属性值T[x],所以推导出对应的便是unknown

解决自动推导下返回值为unknown的问题

这里需要用到extends去判断当前返回类型是不是unknown

如果是则表明是自动推导的那么返回值需要返回any

那么用 T[x] extends unknown可以做到吗?

答案是不可以

这里我们期待的是当T[x]为unknown可以让这个式子为true

但实际上T[x]为任何值这个式子都是true

unknown extends unknown

string extends unknown

any extends unknown

以上全为true

其实也好理解 unknown代表的就是不知道是啥类型所以各个类型都算它的子集

所以这里得麻烦一点我们得反其道行之去取已知类型判断

type KnownType = string | number | boolean | undefined | null | object;

function useState<T>(
  state: {
    [x in keyof T]: string;
  }
): {
  [x in keyof T]: T[x] extends KnownType ? T[x] : any;
} {
  const obj = Object.create(null);
  obj.a = 1;
  return obj;
}

const state = useState({
  a: 'a'
});

这样当T[x]有返回值的时候先取返回值表示是手动指定的泛型,但是其他值的时候则表示是自动推导的类型

可以看到state.a在自动推导下返回值正确了

兼容数组写法

现在我们设计完了useState的一种对象形式,看上面api设计中我们知道它还有一种数组写法

function useState(state: string[]) {
  const obj = Object.create(null);
  obj.a = 1;
  return obj;
}

const t = useState(['a']);

现在这个t得到的是any,现在我们的目标是让t.a能够被自动推导出来

这个有方法吗

方法肯定是有的不过很麻烦说的是自动推导其实麻烦程度感觉和手动赋值快接近了

同样的我们使用泛型来看看推导出来的数组是啥

function useState<T extends string[]>(state: T) {
  return state;
}
const state = useState(['a']);

我们可以看到state中没有获取到准确的属性a只能获取个大范围string

这种泛型约束是没有办法去读取到准确的属性的,即便去读取索引项的值,也只能获取大范围

function useState<T extends string[]>(state: T): T[number] {
  return state[0];
}
const state = useState(['a']);

可以看到state返回仍是string

所以我们也需要减小我们定义泛型的范围,将泛型定义在具体的每一个索引中

function uesState<A extends string, B extends string>(
  state: [A, B]
): Record<A | B, any> {
  const obj = Object.create(null);
  return obj;
}

const state = uesState(['a', 'b']);

我们不是用一整个泛型T去定义整个数组,而是将数组拆分,用了两个泛型A B去接受对应的数组索引项

这样推导出来的结果便是正确的

但这里还要问题,上面指定的是两个索引,如果出现多个索引呢,此时就要用到typescript的另外一个特性重载

function useState<A extends string>(state: [A]): Record<A, any>;
function useState<A extends string, B extends string>(
  state: [A, B]
): Record<A | B, any>;
function useState(state: any) {
  return Object.create(null);
}

这样1个参数或者2个参数都可以被推导出来

如果真的要这么做,重载10次最多10个参数应该能满足绝大部分需求了,这也是前面提到过的为啥这么麻烦

如何使类型推导更简便

那么有方法可以稍显正常一点完成这个操作吗,其实也是有的,只不过我们需要改一下函数的参数传递方式

既然传递一个数组没法获取,那我们就一个一个参数传递

我们来看看这个函数

function useState<T extends string[]>(...args: T): T {
  return args;
}
const state = useState('a', 'b');

这里的泛型仍然指的是传入参数的数组值,但传入的方式已经改变了这样推导出来的类型便是实际的值

可以看到推导出来的state是['a','b'],此时对类型加上number,便可以得到a | b

function useState<T extends string[]>(...args: T): T[number] {
   let t: any;
   return t;
}
const state = useState('a', 'b');

然后我们再用Record包装一下

function useState<T extends string[]>(...args: T): Record<T[number], any> {
  let t: any;
  return t;
}
const state = useState('a', 'b');

可以看到返回的state已经有了a和b这两个属性值

这里还有一个namespace选项没有加上,因为参数是一个一个传的,所以我们在包一层函数用来独立接受namespace

以下就是完整的useState写法

function useState<T extends string[]>(...args: T) {
  return function (namespace: string): Record<T[number], any> {
    let t: any;
    return t;
  };
}
const state = useState('a', 'b', 'c')('inner');

可以看到state可以正确的被自动推导

这种情况下虽然是被自动推导了,但和原本的api有冲突,且大部分时候也不应该去用自动推导,所以我们还是保持了原本的api模式,仍然是传入数组,而不是一个一个参数的传入

结合两种写法

这里又得用上typescript的重载,不过其实重载的次数不是两次,而是四次,因为还有一个命名空间的参数,这个属性可能存在也可能不存在

type KnownType = string | number | boolean | undefined | null | object;

type Dictionary<T = any> = Record<string, T>;

function useState<States = Dictionary>(states: string[]): States;
function useState<States = Dictionary>(
  namespaced: string,
  states: string[]
): States;
function useState<States>(
  states: {
    [x in keyof States]?: string;
  }
): {
  [x in keyof States]: States[x] extends KnownType ? States[x] : any;
};
function useState<States>(
  namespaced: string,
  states: {
    [x in keyof States]?: string;
  }
): {
  [x in keyof States]: States[x] extends KnownType ? States[x] : any;
};
function useState(namespaced?: unknown, states?: unknown) {
  let t: any;
  return t;
}

const state1 = useState({
  a: 'a'
});

const state2 = useState<{
  a: number;
}>({
  a: 'a'
});

const state3 = useState(['a']);

const state4 = useState<{
  a: number;
}>(['a']);