refactor: small fixes and changes in devtools

diff --git a/nuxt/plugin.js b/nuxt/plugin.js
index c06f3b99351528b6d70779f5ba553d43e5011880..329acc98c5543a9dc47d05124a890d48ca4ed193 100644 (file)
--- a/nuxt/plugin.js
+++ b/nuxt/plugin.js
@@ -1,4 +1,5 @@
 // @ts-check
+/// <reference types="./types" />
 import Vue from 'vue'
 // @ts-ignore: this must be pinia to load the local module
 import { setActivePinia, PiniaPlugin, createPinia } from 'pinia'
@@ -9,12 +10,15 @@ Vue.use(PiniaPlugin)
 const myPlugin = (context, inject) => {
   // console.log(context)
 
+  /** @type {import('../src').Pinia} */
   const pinia = createPinia()
   context.app.pinia = pinia
   context.pinia = pinia
   setActivePinia(pinia)
 
-  pinia.use(() => ({ $nuxt: context }))
+  // we bypass warnings
+  // @ts-ignore
+  pinia._p.push(() => ({ $nuxt: context }))
 
   if (process.server) {
     context.beforeNuxtRender(({ nuxtState }) => {

diff --git a/nuxt/types.d.ts b/nuxt/types.d.ts
index f9564c931e9379a27eeabfe62e36340fc4cb1492..fbe2e2d65477d033e6494663c0f8db16ed816948 100644 (file)
--- a/nuxt/types.d.ts
+++ b/nuxt/types.d.ts
@@ -1,8 +1,16 @@
 import '@nuxt/types'
-import { Pinia } from '../dist/src'
+import 'pinia'
+import { Pinia } from 'pinia'
+import { Context } from '@nuxt/types'
 
 declare module '@nuxt/types' {
   export interface Context {
     pinia: Pinia
   }
 }
+
+declare module 'pinia' {
+  export interface PiniaCustomProperties {
+    $nuxt: Context
+  }
+}

diff --git a/src/devtools.ts b/src/devtools.ts
index 03a4a479c5c065180c340f640ed42caae404ce5f..c0df67093285c0844a4e08bfb951f72d7c0c5f68 100644 (file)
--- a/src/devtools.ts
+++ b/src/devtools.ts
@@ -1,3 +1,4 @@
+import { Pinia } from './rootStore'
 import { DevtoolHook, StateTree, StoreWithState } from './types'
 import { assign } from './utils'
 
@@ -15,7 +16,7 @@ interface RootState {
   _devtoolHook: DevtoolHook
   _vm: { $options: { computed: {} } }
   _mutations: {}
-  // we neeed to store modules names
+  // we need to store modules names
   _modulesNamespaceMap: Record<string, boolean>
   _modules: {
     // we only need this specific method to let devtools retrieve the module name
@@ -30,7 +31,10 @@ interface RootState {
 
 let rootStore: RootState
 
-export function useStoreDevtools(store: StoreWithState<string, StateTree>) {
+export function useStoreDevtools(
+  store: StoreWithState<string, StateTree>,
+  stateDescriptor: { get: () => StateTree; set: (newValue: StateTree) => void }
+): void {
   if (!devtoolHook) return
 
   if (!rootStore) {
@@ -38,7 +42,7 @@ export function useStoreDevtools(store: StoreWithState<string, StateTree>) {
       _devtoolHook: devtoolHook,
       _vm: { $options: { computed: {} } },
       _mutations: {},
-      // we neeed to store modules names
+      // we need to store modules names
       _modulesNamespaceMap: {},
       _modules: {
         // we only need this specific method to let devtools retrieve the module name
@@ -58,22 +62,17 @@ export function useStoreDevtools(store: StoreWithState<string, StateTree>) {
     devtoolHook.emit('vuex:init', rootStore)
   }
 
-  rootStore.state[store.$id] = store.$state
-
   // tell the devtools we added a module
   rootStore.registerModule(store.$id, store)
 
-  Object.defineProperty(rootStore.state, store.$id, {
-    get: () => store.$state,
-    set: (state) => (store.$state = state),
-  })
+  Object.defineProperty(rootStore.state, store.$id, stateDescriptor)
 
   // Vue.set(rootStore.state, store.name, store.state)
   // the trailing slash is removed by the devtools
   rootStore._modulesNamespaceMap[store.$id + '/'] = true
 
   devtoolHook.on('vuex:travel-to-state', (targetState) => {
-    store.$state = targetState[store.$id]
+    stateDescriptor.set(targetState[store.$id])
   })
 
   store.$subscribe((mutation, state) => {

diff --git a/src/store.ts b/src/store.ts
index 15042c6d6df8d5bf267501c98cffde010e0c1fb6..61ceedf9cf18f1e0c9e211d01a1426f9dabd7a5a 100644 (file)
--- a/src/store.ts
+++ b/src/store.ts
@@ -80,7 +80,7 @@ function computedFromState<T, Id extends string>(
 /**
  * Creates a store with its state object. This is meant to be augmented with getters and actions
  *
- * @param id - unique identifier of the store, like a name. eg: main, cart, user
+ * @param $id - unique identifier of the store, like a name. eg: main, cart, user
  * @param buildState - function to build the initial state
  * @param initialState - initial state applied to the store, Must be correctly typed to infer typings
  */
@@ -281,6 +281,10 @@ export function defineStore<
 
       stores.set(id, storeAndDescriptor)
 
+      if (__DEV__ && isClient) {
+        useStoreDevtools(storeAndDescriptor[0], storeAndDescriptor[1])
+      }
+
       const store = buildStoreToUse(
         storeAndDescriptor[0],
         storeAndDescriptor[1],
@@ -289,8 +293,6 @@ export function defineStore<
         actions as Record<string, Method> | undefined
       )
 
-      if (isClient) useStoreDevtools(store)
-
       return store
     }