Skip to content

Mutating a shallowRef object using $patch doesn't trigger reactivity #2861

Open
@nguyenalter

Description

Reproduction

https://stackblitz.com/edit/github-5ayhfs4m?file=src%2FApp.vue

Steps to reproduce the bug

  1. Define a shallowRef state (e.g. const counter = shallowRef({ count: 0 })) using setup stores syntax
  2. Use the store in a Vue component
  3. Update the state using $patch({ counter: { count: 1 }) syntax
  4. The state is updated in store but the reactivity is not triggered

Expected behavior

At step 4, the Vue's reactivity system should trigger

Actual behavior

At step 4, the Vue's reactivity system does not trigger (no watcher/computed run after the state change)

Additional information

In the playground, I tested with two other ways to update the shallowRef's state, and the reactivity still works normally:

const counterStore = useCounterStore();
// Using $patch with update function: trigger reactivity
counterStore.$patch((state) => {
    state.counter2 = { count: state.counter2.count + 1 };
  });
// Direct mutate the state: trigger reactivity
counterStore.counter3 = { count: ... };

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions