Have getters ignore some state dependency change

[WangHansen]

What problem is this solving

Provide a way to ignore some dependency changes in getter function.

Use case, I use the normalized entities pattern where I have entities act as a mini frontend database and a list of ids to display the data I want:

export const useBlogStore = defineStore('blog', {
  state: (): BlogState => ({
    ids: [],
    entities: {},
    status: 'initial',
  }),
  getters: {
    userBlogs: (state: BlogState): Blog[] =>
      Object.entries(state.entities)
        .filter(([id]) => state.ids.includes(id))
        .map(([, card]) => card),
    isLoading: (state: BlogState): boolean => {
      return state.status === 'loading';
    }
  },
  actions: {
    async loadUserBlogs() {
      const blogs = await api.listBlogs() 
      for (const blog of blogs) {
        this.ids.push(blog.id);
        this.entities[blog.id] = blog;
      }
    }
    loadOtherPeopleBlogs() {
       // load additional data that changes the `entities` but not `ids`
    }
  }
});

In the above example, I use the store.userBlogs display a list of blogs for user which I get by calling the store.loadUserBlog() API. Now consider a case where I call store.loadOtherPeopleBlog() on an interval basis just to cache data locally in case user wants to see other people's blogs.

store.loadOtherPeopleBlog() might insert data into entities but it never changes the ids state which means the userBlogs getter value should never change. However, with current setup, store.userBlogs will be recomputed even if it shouldn't.

Proposed solution

Maybe provide a function similar to freeze and just wrap the state variable with freeze and it would not be included as dependencies. In react world, they provide something like getUntrackedObject.

Describe alternatives you've considered

I looked at the Vue existing API, there is the toRaw and readonly. On the doc, it says readonly doesn't change reactivity dependency tracking but I am not sure about toRaw

[posva]

You can indeed use toRaw() to escape Vue reactivity tracking. Depending on the case, using toRaw(state), toRaw(this.$state), or even toRaw(this).$state should give you access to that.

Behind the scenes, a getter is just a computed property.