[请教] vue3 自定义简单的状态管理

[gzf6]

之前用 vuex4 倒是实现了和 ts 的结合，但是代码太繁琐，vuex5 遥遥无期，我就想用单例的数据共享和 vue3 的响应数据搞个简化版的，想问问这么写有没有什么坑？

class _Store {
  ...
  
  private _name = ref('a');
  public get name() {
    return readonly(this._name);
  }
  public setName = (v: string) => {
    this._name.value = v;
  };

  private _person = reactive({ name: 'test', age: 12 });
  public get person() {
    return readonly(this._person);
  }
  public setPerson = (v?: { name?: string; age?: number }) => {
    v && Object.assign(this._person, v);
  };
  
  ...
}

[powerfulyang]

mark 。我也是这样写的 也想知道

[wednesdayco]

支持！

[faceRollingKB]

get 和 set 无法跟 template 双向绑定，使用$watch 来模拟 computed 和 watch

[CokeMine]

感觉你说的应该类似于这个 https://www.zhihu.com/answer/1188185176
尤大在这个回复评论的是“完全单例且不需要 SSR 就可以”

[doommm]

目前我是直接用一个叫 pinia 的库 https://pinia.esm.dev/introduction.html

[IndexXuan]

写个 useGlobalState 即可

[gzf6]

@faceRollingKB 嗯，原则上 store 里的数据禁止双向绑定，可以自定义 computed 的 get 和 set 之类的实现

[gzf6]

@CokeMine 😄感觉越写越像 ng

[gzf6]

@doommm 看了一下，好像和 vuex5 设计的 api 差不多

[sjhhjx0122]

目前在使用 pinia，说是根据 vuex5 提案来的，