Plugin Ref Unwrapping

[duckies]

Hello, I'm currently trying to implement a plugin similar to the debounce example that adds a status, error, and isLoading property to each store to consume errors and track action runtime.

My issue is if I add a ref or computed through a plugin it doesn't appear to unwrap and I have to use .value annoyingly. I saw some other issues and discussions about unwrapping typing issues, but this appears to be unrelated as a consequence of me making the plugin incorrectly or something else.

I have tried a few different ways but I have reactivity through something like this, just no unwrapping.

pinia.use(({ store }) => ({
  status: ref("Idle"),
  isLoading: computed(() => store.status.value === "Loading")
}));

More complete Codesandbox example

[posva]

You need to do

import { ref, computed, set } from '@vue/composition-api'
pinia.use(({ store }) => {
  // this is because plugins can be instantiated multiple times as mentioned in the docs intruduction
  if (!Object.hasOwnProperty(store.$state, 'status') {
    const idleRef = ref('Idle')
    set(store.$state, 'status', idleRef)
    set(store, 'status', idleRef)
    const loadingRef =  computed(() => store.status === 'Loading')
    set(store.$state, 'isLoading', loadingRef)
    set(store., 'isLoading', loadingRef)
  }
})

because the properties are not initially declared on the store. I thought I added a note about mutating the state and adding properties (in plugins) to follow the same reactivity rules as Vue (for Vue 2) like Vuex shows at https://vuex.vuejs.org/guide/mutations.html#mutations-follow-vue-s-reactivity-rules

Note that if they are meant to be serialized or used during SSR, they need to be added **both on store and store.$state.

Besides this, there is a bugfix that hasn't been released yet that makes the whole thing work but I tested with a locally installed version and it works after removing all the .value

[posva]

I'm adding a section to document this in docs

[posva]

The fix has been released and the docs are visible at https://pinia.esm.dev/core-concepts/plugins.html#adding-new-state

[duckies]

Thank you for taking the time to look into this. I feel silly having forgotten about Vue 2 reactivity caveats. However, I am still encountering a similar issue. It works fine without SSR, but with it enabled the issue still seems to persist. I've created a new Codesandbox that shows how I set this up.

https://codesandbox.io/s/pinia-adding-new-state-4rsi2

[posva]

I dug this and there seems to be a problem with unwrapping on server side only. I still haven't found a solution

[posva]

Opened vuejs/composition-api#721