回首Vue3之状态管理篇(八)

346 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

这篇文章我们讲一下Store的实例方法:replaceStatewatch

Store的实例方法

在我们创建好Store实例后,我们应该怎么调用它的选项呢,那就用到了这些实例方法。

replaceState

替换 store 的根状态,仅用状态合并或时光旅行调试。也就是说当我们想把几个状态进行合并在一起的时候,可以使用这个方法,虽然这个实例方法我们用的不多。

store.replaceState({...store.state,...{name:'也笑'}})

这里我们需要注意的是:直接替换根状态,所以我们要把合并后的对象当作参数传入进去。

watch

响应式地侦听 fn 的返回值,当值改变时调用回调函数。fn 接收 store 的 state 作为第一个参数,其 getter 作为第二个参数。最后接收一个可选的对象参数表示 Vue 的 vm.$watch 方法的参数。

const stop = store.watch(
    state=>{ console.log("根据state操作") },
    getter=>{ console.log("根据getter操作") },
    {
        跟vm.$watch里面的参数一直  
    }
)

要停止侦听,调用此方法返回的函数即可停止侦听,如上stop是一个 函数,使用如下:

stop()

总结

我们需要注意的是:replaceState平时我们一般用不到,它的参数直接替换根状态;watch也是根据自己的需求使用。

想了解更多文章,传送门已开启:回首Vue3目录篇