Vue3 Watch Immediate True

Posted on  by admin

Click run in the jsfiddle and check the console. The Vuex.Store.watch method returns a unwatch function, which can be called to stop watching.With the immediate option, the current value should be called and the unwatch() function should be available in the callback.

The issue arises when Vuex.Store.watch is used with the immediate option, which will trigger the callback synchronously within the watch() call.therefore it isn't possible to unwatch from within the callback anymore as the callback is called before the watch() method returns the unwatch method.

According to vuejs/vuex#1249 vuex uses vue's watch method.

Get a store object until an expected value is returned, then stop watching and execute an action.Example 1: Get the "user" object from the store, let's assume:.

undefined: the user hasn't been loaded from localstorage yet. null: means there is no user. object: the user is loaded and logged in.

here is some code on how I'd do that (not working, due to mentioned behavior/bug):.

App.vue:

Vuex.Store.watch should never run the getter or callback synchronously in the watch() call.

pass in an unwatch function as the third parameter into the callback (see workaround wrapper below).

make use of the callbacks return value, e.g. return true will stop watching. Manually check if the current state is already meeting your unwatch() expectations and only register a store watcher if that's not the case.

Fix for Example 1:. { const user = store.state.user; if (user || usernull) { resolve(user); } else { const unwatch = store.watch( (state: any) => { return state.user; }, (value: any) => { if (value || valuenull) { unwatch(); resolve(value) } } ); } });}">.

Workaround

This is a more general purpose wrapper as a workaround (not fully tested). 出处:https://www.cnblogs.com/IwishIcould/.

本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接 . 如果文中有什么错误,欢迎指出。以免更多的人被误导。 . posted @ 2022-01-10 12:30南风晚来晚相识 阅读(469) 评论(0) 编辑收藏举报.

Click run in the jsfiddle and check the console.

The Vuex.Store.watch method returns a unwatch function, which can be called to stop watching.With the immediate option, the current value should be called and the unwatch() function should be available in the callback.

What is expected?

The issue arises when Vuex.Store.watch is used with the immediate option, which will trigger the callback synchronously within the watch() call.therefore it isn't possible to unwatch from within the callback anymore as the callback is called before the watch() method returns the unwatch method.

Get a store object until an expected value is returned, then stop watching and execute an action.Example 1: Get the "user" object from the store, let's assume:.

undefined: the user hasn't been loaded from localstorage yet. null: means there is no user.

object: the user is loaded and logged in. here is some code on how I'd do that (not working, due to mentioned behavior/bug):.

Vuex.Store.watch should never run the getter or callback synchronously in the watch() call.

  • pass in an unwatch function as the third parameter into the callback (see workaround wrapper below).
  • make use of the callbacks return value, e.g.
  • return true will stop watching. Manually check if the current state is already meeting your unwatch() expectations and only register a store watcher if that's not the case.

Fix for Example 1:. { const user = store.state.user; if (user || usernull) { resolve(user); } else { const unwatch = store.watch( (state: any) => { return state.user; }, (value: any) => { if (value || valuenull) { unwatch(); resolve(value) } } ); } });}">.

This is a more general purpose wrapper as a workaround (not fully tested). First of all, vue is really great! I’ve encountered some problems using watchers. It seems that watchers are not triggered when the vue instance (or component) is being created.

Only subsequent changes of the prop trigger the watch function.To get things working (to avoid missing the initial value of the prop) I have to repeat the watch function in the mounted hook:.

Is this behaviour intended? And if so, why? Shouldn’t initializing the prop be regarded as a change of the prop (prop changes its value from undefined to something else)? Are you aware of any other (more elegant) ways to accomplish the above? Vue logo.

.

.

{{msg1}}

.

{{obj.name}}--{{obj.age}}

.

{{str}}

.

{{s}}


. . import CompC from './components/CompC.vue'. import {computed, reactive, ref, watch,provide} from 'vue'.

/* import CompB from './components/CompB.vue' */. export default {. console.log('created');. /* setup 函数出现的速度比created要快 执行的顺序比creatd要快 */. setup:function(){.

/* 基本数据类型ref */. /* 引用数据类型reactive */. /* console.log('setup');. let msg = ref('你好');. let msg2 = ('你好');. let flag = ref(true);.

let obj = reactive({. function updataMsg(){. msg.value = '我修改了msg'. function changeFn(){.

flag.value = false. function updataName(){. obj.name = '李四'.

function delAge(){. delete obj.age. function addSchool(){. obj.school = '北大'. updataMsg:updataMsg,. changeFn:changeFn,.

Reproduction link

updataName:updataName,. delAge:delAge,. addSchool:addSchool. /* let msg = ref('谢谢你'). function changzi(s){.

let msg1 = ref('听我说谢谢你'). let str2 = ref('因为有你'). let obj = reactive({. /* vue3中使用provide 实现爷孙组件通信 */. /* 提供数据 提供的数据名 数据值 */. provide('info',obj).

let str = computed(()=>{. return msg1.value +str2.value. let s = computed(()=>{. return msg1.value +str2.value+'温暖了四季'.

function str1Change(){. msg1.value = 'ssadsad'.

/* 在vue3中使用watch监听器 监听基本数据类型 */. /* watch 第三个参数使用{immediate:true} 实现已进入页面立即监听*/. /* watch(str,(newV,oldV)=>{. console.log('新值是:'+newV);. console.log('旧值是:'+oldV);. },{immediate:true}) */. function objChange(){.

obj.name = 'lisi'. /* vue3中实现对引用数据类型obj的监听 */. /* watch(obj,()=>{.

console.log('我被监听了');. /* watch 对 对象里面单独的某一个属性进行监听的时候需要使用箭头函数的方式 */.

watch(()=>obj.name,()=>{. console.log('name被监听了');. .

{{msg}}

.

CompC组件:

{{msg}}

. export default {.

  • immediate
  • deep
  • handler

/* !! setup 里面的this不指向vue实例 */. /* 在setup 里面使用props的数据,需要借助于setup方法第一个参数 */. /* console.log(props.msg); */.

/* 在setup 中 使用子改父,需要借助于setup方法的第二个参数 */. /* console.log(context); */. function changeZ(){. emit('changzi','因为有你').

import {inject} from 'vue'. export default {.

/* 在vue3中导入inject 来实现爷孙通信,记得把值return出去 */.

const c = inject('info').

Using our movie component example, let's say we fetch data based on the movie prop as well as the actor, then this is what our methods and watchers would look like:

This makes things a little cleaner if we are watching multiple props to do the same side-effect.

If you enjoyed this article or have any comments, let me know by replying to this tweet!