From: Eduardo San Martin Morote Date: Sat, 15 May 2021 11:39:41 +0000 (+0200) Subject: refactor: use set from composition-api instead of pinia.Vue X-Git-Tag: v0.5.0~8 X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=3a1fc5bcc1797291c07827ba1d0a630afdab22a7;p=thirdparty%2Fvuejs%2Fpinia.git 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 2b3ebb7f..3061703b 100644 --- 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 9286386c..0a46c345 100644 --- 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 f8ec2a0c..721e29c2 100644 --- 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 b42e147c..a6260a37 100644 --- 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 ff0448d7..4186ee5d 100644 --- 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 45c17669..83f5b95a 100644 --- 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 2325826a..8013c008 100644 --- 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 b21c4af6..1c6a9d1d 100644 --- 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 36c7cfac..c88317b0 100644 --- 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 { @@ -30,7 +29,6 @@ describe('store plugins', () => { it('adds properties to stores', () => { const pinia = createPinia() - pinia.Vue = Vue mount({ template: '

' }, { 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: '

' }, { 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: '

' }, { localVue, pinia }) // must call use after installing the plugin diff --git a/__tests__/subscriptions.spec.ts b/__tests__/subscriptions.spec.ts index 5ed4e305..1b944f25 100644 --- 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 cfbc890a..3b7a954a 100644 --- 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 f27464fd..b682edea 100644 --- 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 41570c91..5de6439a 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -30,7 +30,6 @@ export const PiniaPlugin: PluginFunction = 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 = 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 41abe40b..b529e2ff 100644 --- 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 } 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 78e7529d..3b967278 100644 --- 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( InjectionKey ] { const pinia = getActivePinia() - pinia.Vue.set(pinia.state.value, $id, initialState || buildState()) + set(pinia.state.value, $id, initialState || buildState()) // const state: Ref = toRef(_p.state.value, $id) let isListening = true