$subscribed not triggered when an optional property is set first time

[ygyg70]

Reproduction

Steps to reproduce the bug

1. Create a store with an optional property, such as:

export interface StateInterface {
prop?:string
}
export const useStore = defineStore( 'store', {
state: ():StateInterface => ( { } )
})

2. Subscribe to the store
3. Set the value of store.prop, subscribe will not trigger.

Note - if $patch is used to set the value, subscribe will trigger

Expected behavior

$subscribe will trigger when a value is set for the first time

Actual behavior

For $subscribe to trigger, property has to be initiated as null

Additional information

No response

[dreambo8563]

@ygyg70 provide additional info:
if set the prop with `u.$state.prop = "100"; . that will trigger subscribe which actually invoke the $patch

set value to optional prop won't trigger the watch , I don't know how to make it work. @posva , could you pls help on this? It seems lots of question on optional property.

pinia/packages/pinia/src/store.ts

Line 391 in 2b998ee

watch(

[posva]

This is expected. It’s good practice to declare initial state

[ygyg70]

I switched from Vuex to Pinia, had to spend time to troubleshoot.
Expect others to encounter the same, so at least should be included in the migration docs

[dreambo8563]

I read vuex doc again.

$state.xx =xx will do the replace. it's better to have initial state

Prefer initializing your store's initial state with all desired fields upfront.
When adding new properties to an Object, you should either:
Use Vue.set(obj, 'newProp', 123), or

• Replace that Object with a fresh one. For example, using the object spread syntax we can write it like this: