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

What is the syntax for using typeof with anonymous types in TypeScript?

Mastering the proper usage of the import statement - a guide to seamless integration

Is there a method to incorporate a click event for the confirm button in the ElMessageBox UI element?

Enhance the background property in createMuiTheme of Material-UI by incorporating additional properties using Typescript

Error encountered: TypeScript module 'angularfire2/interfaces' not found in Ionic 3 with angularfire2-offline plugin

A guide on transforming a 1-dimensional array into a 2-dimensional matrix layout using Angular

Exploring the process of incorporating types for a Vue plugin

Tips for creating cascading dynamic attributes within Typescript?

Unable to showcase the content inside the input box

The latest update of WebStorm in 2016.3 has brought to light an error related to the experimental support for decorators, which may undergo changes in forthcoming

Using TypeScript to destructure arrays within a parameter list

Can you explain the distinction between String[] and [String] in TypeScript?

The function cannot accept a string as an argument, it specifically requires a Blob

typescript throwing an unexpected import/export token error

What is the best way to create an optional object parameter in Typescript?

Using TypeScript to access global variables from inside a method

"Modifying the form of an item by adjusting its variable, and rendering certain object properties as

Accessing data retrieved from an API Subscribe method in Angular from an external source

Using Vue's useStorage (usevue) ensures that each time it is initialized, it begins with a clean slate instead of

Guide on incorporating Paddle into your SvelteKit project