Pinia文档、源码试读 —— Getters 属性的一些思考

[JiatLn]

Getters 属性

参考官方文档：https://pinia.vuejs.org/core-concepts/getters.html

getters 属性的用法有两种，分别是带参数和不带参数的方式。

不带参数

const useStore = defineStore({
  id: 'user',
  state: () => {
    return {
      count: 1,
    };
  },
  getters: {
  	dbCount: (state) => state.count * 2,
  	// 或者以下两种方式
  	dbCount(state) { return state.count * 2 }
  	dbCount(): number { return this.count * 2 }
  },
});

在第三种用法中，不用写 state 参数，在方法里面直接使用 this 也是指向当前 store 的 state。
（这里我个人推荐第三种写法，能少写参数就少写点）

Note：这里是需要结合 typescript，标注返回的参数的类型（必填 ）。

不带参数的 getters 调用方法和正常的 state 一样：

const store = useStore();
store.count; // 1
store.dbCount; // 2
store.count++;
store.dbCount; // 4

有点类似于Vue中的计算属性，依赖的状态改变时，相应的 getters 也会变化。

带参数的用法

有时，我们需要使用到参数的用法，比如根据 ulid 获取相应的数据。

 getters: {
   getUserByUlid() {
     // do somethings...
     // console.log('xxxxx'); // 只会执行一次.
     return (ulid: string): IUserInfo | undefined => this.userList.find((item) => item.ulid === ulid);
   },
 }

可以看到，在 getYuhunByUlid 中，是通过返回一个函数的方式实现带参数的 getters。
这种返回函数的函数就是传说中的 高阶函数！
调用方式如下：

const store = useStore();
let user = store.getUserByUlid('fooxxxbarxxxbaz'); // 返回类型 IUserInfo 或 undefined

Thinking：带参数的 getters 为什么要通过高阶函数的方式来实现？

为什么要使用高阶函数（函数返回一个函数）来使用，而不是像这样：

 getters: {
   getUserByUlid(state, ulid) {
     return state.userList.find((item) => item.ulid === ulid);
   },
 }

虽然没有标注变量类型，但还是明显比使用高阶函数简洁了许多，直接这样写不就好了吗？

带着这个疑问，这就需要我们开康康源码了orz

未完待续。。。