From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Mon, 2 Aug 2021 17:23:43 +0000 (+0200)
Subject: feat: enable devtools with Vue 2
X-Git-Tag: v2.0.0-rc.2~9
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=08cdff5be7415f8c635fe9431cb32931950e5fcb;p=thirdparty%2Fvuejs%2Fpinia.git

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 de7bec4a..15b8e731 100644
--- 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 4b4da49c..63d9d59a 100644
--- 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 1fed3917..1d9ccb7c 100644
--- 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