For danielroe#266: add docs for new methods, add unregisterModule Nux…

…t support

docs/pages/en/2.accessor/2.dynamic-modules.md

@@ -1,11 +1,12 @@
 ---
-title: Dynamic modules
-description: 'Vanilla, strongly-typed store accessor.'
+title: Dynamic modules description: 'Vanilla, strongly-typed store accessor.'
 ---
 
 You can also use `typed-vuex` with dynamic modules.
 
-## Sample module
+## Variable usage
+
+### Sample module
 
 ```ts{}[modules/dynamic-module.ts]
 export const namespaced = true
@@ -21,15 +22,15 @@ export const mutations = mutationTree(state, {
 })
 ```
 
-## Accessing the module
+### Accessing the module
 
 You might want to use the store
 
 ```ts{}[components/my-component.vue]
 import Vue from 'vue
 
 import { useAccessor, getAccessorType } from 'typed-vuex'
-import dynamicModule from '~/modules/dynamic-module'
+import * as dynamicModule from '~/modules/dynamic-module'
 
 const accessorType = getAccessorType(dynamicModule)
 
@@ -59,5 +60,80 @@ export default Vue.extend({
     }
   }
 })
+```
+
+## Global usage
+
+You can also register dynamic module on global level for your accessor. This can be a risky way, but can also be a way
+for large projects with no able of using `useAccessor` as variable.
+
+### Module definition
+
+```ts{}[store/index.ts]
+import * as myImportedModule from '~/modules/myImportedModule'
+import * as myNestedModule from '~/modules/myNestedModule'
+
+export const accessorType = getAccessorType({
+  state,
+  getters,
+  mutations,
+  actions,
+  modules: {
+    submodule: {
+      //add this for module to show as possibly-undefined when using $accessor
+      dynamic: true,
+      ...myImportedModule,
+      modules: {
+        myNestedModule,
+      },
+    },
+  },
+})
+```
+
+### Modules registration
+
+```ts{}[components/my-component.vue]
+import Vue from 'vue
 
+//Import from typed-vuex is not required in Nuxt
+import { registerModule, unregisterModule } from 'typed-vuex'
+import myImportedModule from '~/modules/myImportedModule'
+import myNestedModule from '~/modules/myNestedModule'
+
+export default Vue.extend({
+  beforeCreated() {
+    //Or this.$accessorRegisterModule('myImportedModule', myImportedModule) in Nuxt
+    registerModule('myImportedModule', this.$store, this.$accessor, myImportedModule)
+
+    //Or this.$accessorRegisterModule(['myImportedModule', 'myNestedModule'], myImportedModule) in Nuxt
+    registerModule(['myImportedModule', 'myNestedModule'], this.$store, this.$accessor, myNestedModule)
+    
+    //You can also register two modules at once, but you MUST include namespaced: true in that case
+    //this.$accessorRegisterModule('myImportedModule', {...}) syntax in Nuxt
+    registerModule('myImportedModule', {
+      ...myImportedModule,
+      modules: {
+        myNestedModule: {
+          //required for correct usage, especially in Nuxt
+          namespaced: true,
+          ...myNestedModule,
+        },
+      },
+    })
+    
+    //To unregister module(s), simply call this
+    //this.$accessorUnregisterModule('myImportedModule') in Nuxt
+    unregisterModule('myImportedModule', this.$store, this.$accessor)
+  },
+  methods: {
+    anotherMethod() {
+      //If you are not sure about if module will always exist, 
+      // it is recommended to enable dynamic: true in store and always check for undefined
+      if (this.accessor) {
+        this.$accessor.myImportedModule?.myNestedModule?.addEmail('[email protected]')
+      }
+    }
+  }
+})
 ```

packages/nuxt-typed-vuex/src/types/accessorRegisterModule.ts

@@ -1,26 +1,31 @@
 import type {Module} from "vuex";
 
 type AccessorRegisterModule = (path: string | [string, ...string[]], module: Module<any, any>) => void
+type AccessorUnregisterModule = (path: string | [string, ...string[]]) => void
 
 declare module '@nuxt/types' {
   interface NuxtAppOptions {
     $accessorRegisterModule: AccessorRegisterModule;
+    $accessorUnregisterModule: AccessorUnregisterModule;
   }
 
   interface Context {
     $accessorRegisterModule: AccessorRegisterModule;
+    $accessorUnregisterModule: AccessorUnregisterModule;
   }
 }
 
 declare module 'vue/types/vue' {
   interface Vue {
     $accessorRegisterModule: AccessorRegisterModule;
+    $accessorUnregisterModule: AccessorUnregisterModule;
   }
 }
 
 declare module 'vuex/types/index' {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface Store<S> {
     $accessorRegisterModule: AccessorRegisterModule;
+    $accessorUnregisterModule: AccessorUnregisterModule;
   }
 }

packages/nuxt-typed-vuex/template/plugin.js

@@ -1,4 +1,4 @@
-import { getAccessorFromStore, registerModule } from 'typed-vuex'
+import { getAccessorFromStore, registerModule, unregisterModule } from 'typed-vuex'
 
 import { createStore } from '<%= options.store %>'
 
@@ -10,4 +10,7 @@ export default async ({ store }, inject) => {
   inject('accessorRegisterModule', (path, module) => {
     registerModule(path, store, accessor, module)
   })
+  inject('accessorUnregisterModule', (path) => {
+    unregisterModule(path, store, accessor)
+  })
 }