Is it possible to utilize pinia getter as the initial parameter in Vue3's watch function?

Question

Is it possible to utilize pinia getter as the initial parameter in Vue3's watch function?

Issue Recap

In Vue3, can Pinia getters be utilized as a watch target's first argument?

System Details

Vue version: 3.2.13
Pinia version: 2.1.4
TypeScript version: 4.5.5

Problem Description

An error was encountered when attempting to reference the getter of a Pinia store object as the initial argument in a watch function.

Error message code: ts(2769)

Code Example

watch(myStore.getExample, (newValue, oldValue) => {
 ...
})

It is known that Pinia getters are akin to read-only variables similar to Vue3 computed properties.
Considering that computed properties make use of proxy pattern, should Pinia getters be exported as functions instead?

typescript vuejs3 vue-composition-api

Answer 1

Answer №1

I have yet to experiment with this, but my understanding is that in order to make the getExample property reactive within your component, you must first convert it into a ref.

For instance, you can do the following:

import { storeToRefs } from 'pinia'
import { watch } from 'vue'

const { getExample } = storeToRefs(myStore)

watch(getExample, () => {
    console.log('it's reactive!')
})

edit 1:

according to information from the documentation:

To extract properties from the store and maintain reactivity, 
you must use storeToRefs(). 
This function generates refs for each reactive property. 
It is particularly handy when utilizing state solely from the store without invoking any actions.

Answer 2

I have yet to experiment with this, but my understanding is that in order to make the getExample property reactive within your component, you must first convert it into a ref.

For instance, you can do the following:

import { storeToRefs } from 'pinia'
import { watch } from 'vue'

const { getExample } = storeToRefs(myStore)

watch(getExample, () => {
    console.log('it's reactive!')
})

edit 1:

according to information from the documentation:

To extract properties from the store and maintain reactivity, 
you must use storeToRefs(). 
This function generates refs for each reactive property. 
It is particularly handy when utilizing state solely from the store without invoking any actions.

Is it possible to utilize pinia getter as the initial parameter in Vue3's watch function?

Issue Recap

System Details

Problem Description

Code Example

Answer №1

Similar questions

The ko.mapping function is throwing an error because it cannot access the property 'fromJS' which is undefined

Using TypeScript, let's take a closer look at an example of Angular

Upon updating AngularFire, an error is thrown stating: "FirebaseError: Expected type 'Ea', but instead received a custom Ta object."

detect the dismissal event in the modal controller from the main component

What is the process for accessing getBoundingClientRect within the Vue Composition API?

Enforcement of Class Initialization in Typescript 2.7

What is the process for choosing a specific id from a JSON structure?

Vue failing to update when a computed prop changes

Is it possible for Typescript to automatically infer object keys based on the value of a previous argument?

Error in Typescript: A computed property name must be one of the types 'string', 'number', 'symbol', or 'any'

Transitioning from Angular Http to HttpClient: Overcoming Conversion Challenges

The necessity of the second parameter, inverseSide property in TypeORM's configurations, even though it is optional

Is there a way to utilize Typescript enum types for conditional type checking?

A guide to testing the mui Modal onClose method

Struggling to properly implement background images in a React application using Tailwind CSS

"When a class extends another class and utilizes properties within a static property, it essentially becomes

Creating a null array of a specific size can easily be accomplished in Typescript

Navigating to a Different Page in Angular 7

Every time I make updates, I have to reload the page to see the changes take effect

How to define an index signature in Typescript that includes both mandatory and optional keys