feat: enable devtools with Vue 2

This still requires a non released devtools version

diff --git a/src/createPinia.ts b/src/createPinia.ts
index de7bec4a177e1f18244ea4ec4058c6434fc70d06..15b8e7315ede5d0ada07ab94c892fb11437acde1 100644 (file)
--- a/src/createPinia.ts
+++ b/src/createPinia.ts
@@ -4,7 +4,7 @@ import {
   setActivePinia,
   piniaSymbol,
 } from './rootStore'
-import { ref, App, markRaw, effectScope } from 'vue-demi'
+import { ref, App, markRaw, effectScope, isVue2 } from 'vue-demi'
 import { registerPiniaDevtools, devtoolsPlugin } from './devtools'
 import { IS_CLIENT } from './env'
 import { StateTree, StoreGeneric } from './types'
@@ -24,22 +24,24 @@ export function createPinia(): Pinia {
 
   const pinia: Pinia = markRaw({
     install(app: App) {
-      pinia._a = app
-      app.provide(piniaSymbol, pinia)
-      app.config.globalProperties.$pinia = pinia
-      if (IS_CLIENT) {
-        // this allows calling useStore() outside of a component setup after
-        // installing pinia's plugin
-        setActivePinia(pinia)
-        if (__DEV__) {
-          registerPiniaDevtools(app, pinia)
+      if (!isVue2) {
+        pinia._a = app
+        app.provide(piniaSymbol, pinia)
+        app.config.globalProperties.$pinia = pinia
+        if (IS_CLIENT) {
+          // this allows calling useStore() outside of a component setup after
+          // installing pinia's plugin
+          setActivePinia(pinia)
+          if (__DEV__) {
+            registerPiniaDevtools(app, pinia)
+          }
         }
+        toBeInstalled.forEach((plugin) => _p.push(plugin))
       }
-      toBeInstalled.forEach((plugin) => _p.push(plugin))
     },
 
     use(plugin) {
-      if (!this._a) {
+      if (!this._a && !isVue2) {
         toBeInstalled.push(plugin)
       } else {
         _p.push(plugin)

diff --git a/src/store.ts b/src/store.ts
index 4b4da49c5ce38e35daffbdb29ffb65210d2b7210..63d9d59a0e27f8482c157f18a6663000a24ebf17 100644 (file)
--- a/src/store.ts
+++ b/src/store.ts
@@ -104,7 +104,8 @@ function createOptionsStore<
 
   function setup() {
     if (!initialState && (!__DEV__ || !hot)) {
-      if (isVue2) {
+      // only use set in Vue 2 if it's not for HMR
+      if (isVue2 && (!__DEV__ || !id.startsWith('__hot'))) {
         set(pinia.state.value, id, state ? state() : {})
       } else {
         pinia.state.value[id] = state ? state() : {}
@@ -203,8 +204,12 @@ function createSetupStore<
   const initialState = pinia.state.value[$id] as UnwrapRef<S> | undefined
 
   if (!initialState && __DEV__ && !hot) {
-    // should be set in Vue 2
-    pinia.state.value[$id] = {}
+    // only use set in Vue 2 if it's not for HMR
+    if (isVue2 && (!__DEV__ || !$id.startsWith('__hot'))) {
+      set(pinia.state.value, $id, {})
+    } else {
+      pinia.state.value[$id] = {}
+    }
   }
 
   const hotState = ref({} as S)
@@ -366,7 +371,11 @@ function createSetupStore<
         hotState.value[key] = toRef(setupStore as any, key)
         // createOptionStore already did this
       } else if (!buildState) {
-        pinia.state.value[$id][key] = prop
+        if (isVue2) {
+          set(pinia.state.value[$id], key, prop)
+        } else {
+          pinia.state.value[$id][key] = prop
+        }
         // TODO: avoid if state exists for SSR
       }
 

diff --git a/src/vue2-plugin.ts b/src/vue2-plugin.ts
index 1fed3917542667ebf9b8df4aa4ec50eae3b987ff..1d9ccb7ce6e34124af9b2433c72a20426b7084d3 100644 (file)
--- a/src/vue2-plugin.ts
+++ b/src/vue2-plugin.ts
@@ -1,5 +1,7 @@
 import type { Plugin } from 'vue-demi'
-import { piniaSymbol } from './rootStore'
+import { registerPiniaDevtools } from './devtools'
+import { IS_CLIENT } from './env'
+import { Pinia, piniaSymbol, setActivePinia } from './rootStore'
 
 /**
  * Vue 2 Plugin that must be installed for pinia to work. Note **you don't need
@@ -30,6 +32,7 @@ export const PiniaPlugin: Plugin = function (_Vue) {
     beforeCreate() {
       const options = this.$options
       if (options.pinia) {
+        const pinia = options.pinia as Pinia
         // HACK: taken from provide(): https://github.com/vuejs/composition-api/blob/master/src/apis/inject.ts#L30
         /* istanbul ignore else */
         if (!(this as any)._provided) {
@@ -39,13 +42,23 @@ export const PiniaPlugin: Plugin = function (_Vue) {
             set: (v) => Object.assign(provideCache, v),
           })
         }
-        ;(this as any)._provided[piniaSymbol as any] = options.pinia
+        ;(this as any)._provided[piniaSymbol as any] = pinia
 
         // propagate the pinia instance in an SSR friendly way
         // avoid adding it to nuxt twice
         /* istanbul ignore else */
         if (!this.$pinia) {
-          this.$pinia = options.pinia
+          this.$pinia = pinia
+        }
+
+        pinia._a = this as any
+        if (IS_CLIENT) {
+          // this allows calling useStore() outside of a component setup after
+          // installing pinia's plugin
+          setActivePinia(pinia)
+          if (__DEV__) {
+            registerPiniaDevtools(pinia._a, pinia)
+          }
         }
       } else if (!this.$pinia && options.parent && options.parent.$pinia) {
         this.$pinia = options.parent.$pinia