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

2021 年 6 月 25 日
 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);
  };
  
  ...
}
3254 次点击
所在节点    Vue.js
10 条回复
powerfulyang
2021 年 6 月 25 日
mark 。我也是这样写的 也想知道
wednesdayco
2021 年 6 月 25 日
支持!
faceRollingKB
2021 年 6 月 25 日
get 和 set 无法跟 template 双向绑定,使用$watch 来模拟 computed 和 watch
CokeMine
2021 年 6 月 26 日
感觉你说的应该类似于这个 https://www.zhihu.com/answer/1188185176
尤大在这个回复评论的是“完全单例且不需要 SSR 就可以”
doommm
2021 年 6 月 27 日
目前我是直接用一个叫 pinia 的库 https://pinia.esm.dev/introduction.html
IndexXuan
2021 年 6 月 27 日
写个 useGlobalState 即可
gzf6
2021 年 6 月 27 日
@faceRollingKB 嗯,原则上 store 里的数据禁止双向绑定,可以自定义 computed 的 get 和 set 之类的实现
gzf6
2021 年 6 月 27 日
@CokeMine 😄感觉越写越像 ng
gzf6
2021 年 6 月 27 日
@doommm 看了一下,好像和 vuex5 设计的 api 差不多
linkopeneyes
2021 年 6 月 28 日
目前在使用 pinia,说是根据 vuex5 提案来的,

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/785805

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX