Plugin function is executed every time useStore() is called?

[go-web-dev-my]

I am trying to write a small plugin to keep data in localStorage in sync with Pinia store.

The idea is to listen to changes via store.$subscribe and write to localStorage.
On page load, I want to read from localStorage and update the store. Ideally this should only happen ONE TIME, which is on the initial page load.

The problem is that the function returned by the plugin is called each time there is a useStore() call in any component.
I might be doing something wrong. Is there a better pattern I should adapt?

Let's take a look at the code to convey my idea:

// piniaPersistence.js
export default function piniaPersistence() {
  return ({ options, store }) => {
    const restoreData = () => {
      console.log('restoreData is called')
      // READ
      localStorage.getItem(... )
      store.$patch( ... )
    }
    
    if (options.persistence) restoreData()
    
    store.$subscribe((mutation, state) => {
      // WRITE
      localStorage.setItem( ... )
    }
  }
}

// main.js
import piniaPersistence from 'piniaPersistence'

const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPersistence())
app.use(pinia)

// from here onwards,
useStore() // <-- each time this happens, restoreData() is called

[posva]

This is normal for v1 and was even explained in docs. It shouldn't happen in v2 tho 🙂

[go-web-dev-my]

Thanks @posva for the reply. I love your work.
I am using version ^2.0.0-rc.6 .

In the plugin function itself when there is a useStore() call, the function would execute again,
probably because Pinia did not register the plugin yet due to the first call is not finished yet.

This leads to infinity loop.
My situation is very very niche, and fortunately the workaround is very simple, I added a flag check at the top of the function.

[go-web-dev-my]

I bumped my Pinia version to the latest rc9 and issue no longer exist.

CSB is here if you are curious why do I need to call useStore() in this way:
https://codesandbox.io/s/suspicious-benji-9vf8f

Of course, I welcome any feedback from you if my paradigm is wrong.
Long time Vue 2 user, but new to Vue 3 and Pinia.