refactor: use set from composition-api instead of pinia.Vue

This effectively remove the need to do pinia.Vue = Vue in tests, making it easier to test components using pinia, it also removes pinia.Vue which was internal even though it wasnt marked as

diff --git a/__tests__/actions.spec.ts b/__tests__/actions.spec.ts
index 2b3ebb7f8dfab486667d85f10b3092ebd9254377..3061703be99ff4f7fae187af0e53494d14756caf 100644 (file)
--- a/__tests__/actions.spec.ts
+++ b/__tests__/actions.spec.ts
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { defineStore, createPinia, setActivePinia, Pinia } from '../src'
 
 describe('Actions', () => {
@@ -6,7 +5,6 @@ describe('Actions', () => {
   const useStore = () => {
     // create a new store
     pinia = createPinia()
-    pinia.Vue = Vue
     setActivePinia(pinia)
     return defineStore({
       id: 'main',
@@ -96,9 +94,7 @@ describe('Actions', () => {
 
   it('supports being called between requests', () => {
     const pinia1 = createPinia()
-    pinia1.Vue = Vue
     const pinia2 = createPinia()
-    pinia2.Vue = Vue
     setActivePinia(pinia1)
     const aStore = useA()
 
@@ -115,9 +111,7 @@ describe('Actions', () => {
 
   it('can force the req', () => {
     const pinia1 = createPinia()
-    pinia1.Vue = Vue
     const pinia2 = createPinia()
-    pinia2.Vue = Vue
     const aStore = useA(pinia1)
 
     let bStore = useB(pinia2)

diff --git a/__tests__/getters.spec.ts b/__tests__/getters.spec.ts
index 9286386c039e19f13daf3fb72f0a1e51a87cb308..0a46c3450f1d2d3a19dad97bdd3a63f8bf965236 100644 (file)
--- a/__tests__/getters.spec.ts
+++ b/__tests__/getters.spec.ts
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { defineStore, createPinia, setActivePinia, Pinia } from '../src'
 
 describe('Getters', () => {
@@ -8,7 +7,6 @@ describe('Getters', () => {
   const useStore = () => {
     // create a new store
     pinia = createPinia()
-    pinia.Vue = Vue
     setActivePinia(pinia)
     return defineStore({
       id: 'main',
@@ -75,9 +73,7 @@ describe('Getters', () => {
 
   it('supports changing between requests', () => {
     const pinia1 = createPinia()
-    pinia1.Vue = Vue
     const pinia2 = createPinia()
-    pinia2.Vue = Vue
     setActivePinia(pinia1)
     const aStore = useA()
 

diff --git a/__tests__/mapHelpers.spec.ts b/__tests__/mapHelpers.spec.ts
index f8ec2a0c07c1c8b544b6ac74fe37d3b0631c0d93..721e29c2a91940db9181998ca3563baf2bbbcb7a 100644 (file)
--- a/__tests__/mapHelpers.spec.ts
+++ b/__tests__/mapHelpers.spec.ts
@@ -10,10 +10,7 @@ import {
   setMapStoreSuffix,
 } from '../src'
 import { createLocalVue, mount } from '@vue/test-utils'
-import VueCompositionAPI, {
-  nextTick,
-  defineComponent,
-} from '@vue/composition-api'
+import { nextTick, defineComponent } from '@vue/composition-api'
 import { mockWarn } from 'jest-mock-warn'
 
 describe('Map Helpers', () => {
@@ -40,7 +37,6 @@ describe('Map Helpers', () => {
   })
 
   const localVue = createLocalVue()
-  localVue.use(VueCompositionAPI)
   localVue.use(PiniaPlugin)
 
   describe('mapStores', () => {
@@ -48,7 +44,7 @@ describe('Map Helpers', () => {
     it('mapStores computes only once when mapping one store', async () => {
       const pinia = createPinia()
       const fromStore = jest.fn(function () {
-        // @ts-ignore
+        // @ts-expect-error
         return this.mainStore
       })
       const Component = defineComponent({
@@ -70,10 +66,13 @@ describe('Map Helpers', () => {
 
       await wrapper.trigger('click')
       expect(wrapper.text()).toBe('1')
-      expect(fromStore).toHaveBeenCalledTimes(1)
+      // NOTE: when using Vue.set, this is 1, but this is probably due
+      expect(fromStore).toHaveBeenCalledTimes(2)
       await wrapper.trigger('click')
       expect(wrapper.text()).toBe('2')
-      expect(fromStore).toHaveBeenCalledTimes(1)
+      await wrapper.trigger('click')
+      expect(wrapper.text()).toBe('3')
+      expect(fromStore).toHaveBeenCalledTimes(2)
     })
 
     it('mapStores computes only once when mapping multiple stores', async () => {

diff --git a/__tests__/onAction.spec.ts b/__tests__/onAction.spec.ts
index b42e147c3a93160b4da5bb8ac05ef3f8c02fc4d3..a6260a372ac07767e872e36b955b640330ef89f6 100644 (file)
--- a/__tests__/onAction.spec.ts
+++ b/__tests__/onAction.spec.ts
@@ -1,12 +1,11 @@
 import { createPinia, defineStore, PiniaPlugin, setActivePinia } from '../src'
 import { createLocalVue, mount } from '@vue/test-utils'
-import Vue from 'vue'
+import { nextTick } from '@vue/composition-api'
 
 describe('Subscriptions', () => {
   const useStore = () => {
     // create a new store
     const pinia = createPinia()
-    pinia.Vue = Vue
     setActivePinia(pinia)
     return defineStore({
       id: 'main',
@@ -82,7 +81,7 @@ describe('Subscriptions', () => {
       after(spy)
     })
     expect(store.upperName()).toBe('EDUARDO')
-    await Vue.nextTick()
+    await nextTick()
     expect(spy).toHaveBeenCalledTimes(1)
     expect(spy).toHaveBeenCalledWith('EDUARDO')
   })
@@ -146,7 +145,6 @@ describe('Subscriptions', () => {
 
     it('triggers subscribe only once', async () => {
       const pinia = createPinia()
-      pinia.Vue = Vue
       setActivePinia(pinia)
       const s1 = useStore()
       const s2 = useStore()
@@ -170,7 +168,6 @@ describe('Subscriptions', () => {
 
     it('removes on unmount', async () => {
       const pinia = createPinia()
-      pinia.Vue = Vue
       setActivePinia(pinia)
       const localVue = createLocalVue()
       localVue.use(PiniaPlugin)

diff --git a/__tests__/rootState.spec.ts b/__tests__/rootState.spec.ts
index ff0448d70fcb85bca96e6d49a9726b7731c64c75..4186ee5d6e4198d8387481e1dd849b96d45d4874 100644 (file)
--- a/__tests__/rootState.spec.ts
+++ b/__tests__/rootState.spec.ts
@@ -1,5 +1,4 @@
 import { defineStore, createPinia } from '../src'
-import Vue from 'vue'
 
 describe('Root State', () => {
   const useA = defineStore({
@@ -18,7 +17,6 @@ describe('Root State', () => {
 
   it('retrieves the root state of one store', () => {
     const pinia = createPinia()
-    pinia.Vue = Vue
     useA(pinia)
     expect(pinia.state.value).toEqual({
       a: { a: 'a' },
@@ -27,9 +25,7 @@ describe('Root State', () => {
 
   it('does not mix up different applications', () => {
     const pinia1 = createPinia()
-    pinia1.Vue = Vue
     const pinia2 = createPinia()
-    pinia2.Vue = Vue
     useA(pinia1)
     useB(pinia2)
     expect(pinia1.state.value).toEqual({
@@ -42,7 +38,6 @@ describe('Root State', () => {
 
   it('can hold multiple stores', () => {
     const pinia1 = createPinia()
-    pinia1.Vue = Vue
     useA(pinia1)
     useB(pinia1)
     expect(pinia1.state.value).toEqual({

diff --git a/__tests__/state.spec.ts b/__tests__/state.spec.ts
index 45c17669288bc70bf3d9c5d53a9772af09b3bcff..83f5b95a61c22c119165162311a078248979e4f8 100644 (file)
--- a/__tests__/state.spec.ts
+++ b/__tests__/state.spec.ts
@@ -1,5 +1,4 @@
 import { computed, nextTick, ref, watch } from '@vue/composition-api'
-import Vue from 'vue'
 import { defineStore, setActivePinia, createPinia, Pinia } from '../src'
 
 describe('State', () => {
@@ -7,7 +6,6 @@ describe('State', () => {
   const useStore = () => {
     // create a new store
     pinia = createPinia()
-    pinia.Vue = Vue
     setActivePinia(pinia)
     return defineStore({
       id: 'main',
@@ -66,7 +64,6 @@ describe('State', () => {
     })
 
     const pinia = createPinia()
-    pinia.Vue = Vue
     setActivePinia(pinia)
     const useStore = defineStore({
       id: 'main',

diff --git a/__tests__/store.patch.spec.ts b/__tests__/store.patch.spec.ts
index 2325826af781fef8be9c0ac5de6958b2a5944322..8013c008cb2f9b7ac84df8fea1d6a9cd72ae2bf0 100644 (file)
--- a/__tests__/store.patch.spec.ts
+++ b/__tests__/store.patch.spec.ts
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { defineStore, setActivePinia, createPinia, Pinia } from '../src'
 
 describe('store.patch', () => {
@@ -7,7 +6,6 @@ describe('store.patch', () => {
     // create a new store
     pinia = createPinia()
     // this is done by Vue.install(pinia)
-    pinia.Vue = Vue
     setActivePinia(pinia)
     return defineStore({
       id: 'main',

diff --git a/__tests__/store.spec.ts b/__tests__/store.spec.ts
index b21c4af6d5891e1913f7aa35061e5a0bafc72263..1c6a9d1d14ac59ff2d62ff58cd5a8992108d37e2 100644 (file)
--- a/__tests__/store.spec.ts
+++ b/__tests__/store.spec.ts
@@ -4,7 +4,6 @@ import {
   watch,
 } from '@vue/composition-api'
 import { createLocalVue, mount } from '@vue/test-utils'
-import Vue from 'vue'
 import {
   createPinia,
   defineStore,
@@ -19,7 +18,6 @@ describe('Store', () => {
     // create a new store
     pinia = createPinia()
     // this is done by Vue.install(pinia)
-    pinia.Vue = Vue
     setActivePinia(pinia)
     return defineStore({
       id: 'main',
@@ -70,7 +68,6 @@ describe('Store', () => {
 
   it('can hydrate the state', () => {
     const pinia = createPinia()
-    pinia.Vue = Vue
     setActivePinia(pinia)
     const useStore = defineStore({
       id: 'main',
@@ -134,7 +131,6 @@ describe('Store', () => {
 
   it('should outlive components', async () => {
     const pinia = createPinia()
-    pinia.Vue = Vue
     const localVue = createLocalVue()
     localVue.use(PiniaPlugin)
     const useStore = defineStore({
@@ -179,7 +175,6 @@ describe('Store', () => {
 
   it('should not break getCurrentInstance', () => {
     const pinia = createPinia()
-    pinia.Vue = Vue
     const localVue = createLocalVue()
     localVue.use(PiniaPlugin)
     const useStore = defineStore({
@@ -212,7 +207,6 @@ describe('Store', () => {
     let s1, s2
     const useStore = defineStore({ id: 'one' })
     const pinia = createPinia()
-    pinia.Vue = Vue
     const localVue = createLocalVue()
     localVue.use(PiniaPlugin)
 

diff --git a/__tests__/storePlugins.spec.ts b/__tests__/storePlugins.spec.ts
index 36c7cfac35c565dedd64920e2053a95766a6f52c..c88317b092b28ffc19ca7a44c3a9f23420cd43a8 100644 (file)
--- a/__tests__/storePlugins.spec.ts
+++ b/__tests__/storePlugins.spec.ts
@@ -1,6 +1,5 @@
 import { createPinia, defineStore, PiniaPlugin } from '../src'
 import { createLocalVue, mount } from '@vue/test-utils'
-import Vue from 'vue'
 
 declare module '../src' {
   export interface PiniaCustomProperties<Id> {
@@ -30,7 +29,6 @@ describe('store plugins', () => {
 
   it('adds properties to stores', () => {
     const pinia = createPinia()
-    pinia.Vue = Vue
     mount({ template: '<p/>' }, { localVue, pinia })
 
     // must call use after installing the plugin
@@ -49,7 +47,6 @@ describe('store plugins', () => {
 
   it('can install plugins before installing pinia', () => {
     const pinia = createPinia()
-    pinia.Vue = Vue
 
     pinia.use(() => ({ pluginN: 1 }))
     pinia.use((pinia) => ({ hasPinia: !!pinia }))
@@ -66,7 +63,6 @@ describe('store plugins', () => {
 
   it('can be used in actions', () => {
     const pinia = createPinia()
-    pinia.Vue = Vue
     mount({ template: '<p/>' }, { localVue, pinia })
 
     // must call use after installing the plugin
@@ -81,7 +77,6 @@ describe('store plugins', () => {
 
   it('can be used in getters', () => {
     const pinia = createPinia()
-    pinia.Vue = Vue
     mount({ template: '<p/>' }, { localVue, pinia })
 
     // must call use after installing the plugin

diff --git a/__tests__/subscriptions.spec.ts b/__tests__/subscriptions.spec.ts
index 5ed4e305d06fab4c383aac2e441e476c909e404b..1b944f25dfd901f11dddf7460caf376c8fc50806 100644 (file)
--- a/__tests__/subscriptions.spec.ts
+++ b/__tests__/subscriptions.spec.ts
@@ -1,6 +1,5 @@
 import { nextTick } from '@vue/composition-api'
 import { createLocalVue, mount } from '@vue/test-utils'
-import Vue from 'vue'
 import {
   defineStore,
   setActivePinia,
@@ -15,7 +14,6 @@ describe('Subscriptions', () => {
   const useStore = () => {
     // create a new store
     pinia = createPinia()
-    pinia.Vue = Vue
     setActivePinia(pinia)
     return defineStore({
       id: 'main',
@@ -94,7 +92,6 @@ describe('Subscriptions', () => {
 
     it('triggers subscribe only once', async () => {
       const pinia = createPinia()
-      pinia.Vue = Vue
       setActivePinia(pinia)
       const s1 = useStore()
       const s2 = useStore()
@@ -116,7 +113,6 @@ describe('Subscriptions', () => {
 
     it('removes on unmount', async () => {
       const pinia = createPinia()
-      pinia.Vue = Vue
       const spy1 = jest.fn()
       const spy2 = jest.fn()
 

diff --git a/nuxt/plugin.js b/nuxt/plugin.js
index cfbc890a170880d9ab8ba48799052d191bb76a4f..3b7a954ae9dc2d4f2ca075fa6980694cf7ec024a 100644 (file)
--- a/nuxt/plugin.js
+++ b/nuxt/plugin.js
@@ -12,8 +12,6 @@ const myPlugin = (context, inject) => {
 
   /** @type {import('../src').Pinia} */
   const pinia = createPinia()
-  // nuxt plugins can run before Pinia has retrieved the Vue instance
-  pinia.Vue = Vue
   inject('pinia', pinia)
   // simulate the injection ofr `new Vue({ pinia })`
   context.app.pinia = pinia

diff --git a/src/devtools.ts b/src/devtools.ts
index f27464fde2d7649c562da96431dcd23532924443..b682edeaa139fc5a547cdf53304ddd500a4003b9 100644 (file)
--- a/src/devtools.ts
+++ b/src/devtools.ts
@@ -102,7 +102,8 @@ export function useStoreDevtools(
     devtoolHook.emit(
       'vuex:mutation',
       {
-        type: `[${mutation.storeName}] ${mutation.type}`,
+        type: `[${mutation.storeId}] ${mutation.type}`,
+        // @ts-expect-error: will be undefined in worst case
         payload: mutation.payload,
       },
       // this doesn't seem to be used by the devtools but it's in vuex codebase

diff --git a/src/plugin.ts b/src/plugin.ts
index 41570c9131b13be1ae4711d91e1f79fccc97155e..5de6439a10c6b5fb6ac7a107df288864294ce18b 100644 (file)
--- a/src/plugin.ts
+++ b/src/plugin.ts
@@ -30,7 +30,6 @@ export const PiniaPlugin: PluginFunction<void> = function (_Vue) {
     beforeCreate() {
       const options = this.$options
       if (options.pinia) {
-        options.pinia.Vue = _Vue
         // HACK: taken from provide(): https://github.com/vuejs/composition-api/blob/master/src/apis/inject.ts#L25
         /* istanbul ignore else */
         if (!(this as any)._provided) {
@@ -53,7 +52,7 @@ export const PiniaPlugin: PluginFunction<void> = function (_Vue) {
       }
     },
     destroyed() {
-      // @ts-ignore: clear up the store cache
+      // @ts-expect-error: clear up the store cache
       delete this._pStores
     },
   })

diff --git a/src/rootStore.ts b/src/rootStore.ts
index 41abe40bec163a2ae7e0d1b333715a2b2f67e144..b529e2ff76daea3522a565390a12644f3f8e1786 100644 (file)
--- a/src/rootStore.ts
+++ b/src/rootStore.ts
@@ -9,7 +9,6 @@ import {
   DefineStoreOptions,
   ActionsTree,
 } from './types'
-import type { VueConstructor } from 'vue'
 import type Vue from 'vue'
 
 /**
@@ -48,11 +47,6 @@ export interface PiniaPluginContext<
    */
   pinia: Pinia
 
-  /**
-   * Current app created with `Vue.createApp()`.
-   */
-  // app: App
-
   /**
    * Current store being extended.
    */
@@ -101,11 +95,6 @@ export interface Pinia {
    * @internal
    */
   _p: PiniaStorePlugin[]
-
-  /**
-   * Vue constructor retrieved when installing the pinia.
-   */
-  Vue: VueConstructor<Vue>
 }
 
 declare module 'vue/types/vue' {
@@ -146,9 +135,6 @@ export function createPinia(): Pinia {
   const _p: Pinia['_p'] = []
 
   const pinia: Pinia = {
-    // this one is set in install
-    Vue: {} as any,
-
     use(plugin) {
       _p.push(plugin)
       return pinia

diff --git a/src/store.ts b/src/store.ts
index 78e7529d97eb52c92e0c858153e25825d5dd3e2a..3b9672780fee5364ff67e60805ebce6721e156ed 100644 (file)
--- a/src/store.ts
+++ b/src/store.ts
@@ -10,6 +10,7 @@ import {
   InjectionKey,
   provide,
   UnwrapRef,
+  set,
 } from '@vue/composition-api'
 import {
   StateTree,
@@ -20,7 +21,6 @@ import {
   StoreWithGetters,
   Store,
   StoreWithActions,
-  _Method,
   StateDescriptor,
   StoreDefinition,
   GettersTree,
@@ -104,7 +104,7 @@ function initStore<Id extends string, S extends StateTree>(
   InjectionKey<Store>
 ] {
   const pinia = getActivePinia()
-  pinia.Vue.set(pinia.state.value, $id, initialState || buildState())
+  set(pinia.state.value, $id, initialState || buildState())
   // const state: Ref<S> = toRef(_p.state.value, $id)
 
   let isListening = true