vue3 pinia 初次赋值 state 时如何禁用 subscribe ?

作者站长头像
站长
· 阅读数 6

场景是这样:有一个 store,初始化时需要从服务端加载数据。用户在网页操作期间,state 产生变化了,需要再保存会服务端。但是初次加载时就会触发 subscribe,如何禁用呢?

这是代码现场:https://codesandbox.io/s/exciting-ganguly-id62o9?file=/src/Ap...

我也把关键的几处代码罗列出来。

通过 subscribe 观察 store 的变化,并执行保存服务端的逻辑

// 订阅每次变化,保存至服务端。这里简化操作了,把变更记录直观显示出来
useCounter.$subscribe((mutation, state) => {
  log.value += "<hr>" + JSON.stringify(mutation);
});

通过 load 方法把从服务端获取的数据,保存至 store

// store 中初次加载数据,这里简化只加载一个
const load = (c) => {
    count.value = c;
};

或者说是不是有更好的实现办法呢?如果我讲的不清楚,可以再补充说明。

回复
1个回答
avatar
test
2024-07-03

可以加一个flag, 初始化时默认为false, 初始触发subscribe, 改一下状态就行:

// 订阅每次变化,保存至服务端。这里简化操作了,把变更记录直观显示出来
useCounter.$subscribe((mutation, state) => {
    if(!flag) {
        flag = true
        return
    }
  log.value += "<hr>" + JSON.stringify(mutation);
});
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容