initial `reactive ` value to null

Question

everybody. I have a question about using reactive. I know the type of a state, but the initial value is empty. How do I use assignment? The code is as follows

//....
  let origin = reactive<Timeslot | {}>({});
  const handler = (data) => {
       Object.assign(origin, data);
  };
//..

In fact, I want to assign the initial value of origin to null. How can I deal with this problem?

Answer 1

You wouldn't be able to assign null to an reactive, as reactive signature requires the type extends an object:

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>

With that said, why do you want a null reactive ? You wouldn't be able to benefit from vue's reactivity system if you initialize a reactive with null or even an empty object (even though this is possible), as you are not tracking anything in that case.

Perhaps what you need is a ref ? You can make a ref nullable with a nullable union type like so.

let origin = ref<Timeslot | null>(null);