title: How we can access to Vuex store instance inside store module file in vuex-module-decorators + Nuxt TypeScript?
body: <blockquote>
  <p>There are <strong>many</strong> possible ways to construct your modules.</p>
  <p><a href="https://github.com/championswimmer/vuex-module-decorators#accessing-modules-with-nuxtjs" rel="nofollow noreferrer">vuex-module-decorators official
  readme</a></p>
  </blockquote>
  <blockquote>
  <p><strong>One of</strong> the most popular approaches is vuex-module-decorators.</p>
  <p><a href="https://typescript.nuxtjs.org/cookbook/store#vuex-module-decorators" rel="nofollow noreferrer">Nuxt TypeScript official
  documentation</a></p>
  </blockquote>
  <p>Well, where at least two approaches has been introduced? The documentations are introducing just one approach and most articles are refers to it.</p>
  <h2>The official approach listing</h2>
  <h3>~/store/index.ts</h3>
  <pre class="lang-js prettyprint-override"><code>import { Store } from 'vuex'
  import { initialiseStores } from '~/utils/store-accessor'
  const initializer = (store: Store&lt;any&gt;) =&gt; initialiseStores(store)
  export const plugins = [initializer]
  export * from '~/utils/store-accessor'
  </code></pre>
  <h3>~/utils/store-accessor.ts</h3>
  <pre class="lang-js prettyprint-override"><code>import { Store } from 'vuex'
  import { getModule } from 'vuex-module-decorators'
  import example from '~/store/example'
  
  let exampleStore: example
  
  function initialiseStores(store: Store&lt;any&gt;): void {
    exampleStore = getModule(example, store)
  }
  
  export { initialiseStores, exampleStore }
  </code></pre>
  <h2>Why I don't accept it</h2>
  <ol>
  <li>I don't understand <strong>what</strong> we doing. Although the code volume is small, there are a lot of not obvious things. For example: Why we need to define the <code>plugins</code> constant? Why we need to export it? How and where we using this export?</li>
  <li>I don't understand <strong>why</strong> we need to the acrobatics such as. If there are the other approaches, it must the more intuitive solution.</li>
  <li>I don't understand why we should to follow to this approach, <strong>not other one</strong>.</li>
  <li>It's not enough type-safe. 'any' has been used.</li>
  </ol>
  <h2>What I want to do</h2>
  <p>If it's possible, I want to use the 'vuex-module-decorators' as usual, or, at least understand what going on and develop more clean solution.</p>
  <p>The standard usage of dynamic modules in 'vuex-module-decorators' is:</p>
  <pre class="lang-js prettyprint-override"><code>import store from &quot;@store&quot;;
  import { Module, VuexModule } from &quot;vuex-module-decorators&quot;;
  
  @Module({
    name: &quot;PRODUCTS_MANAGER&quot;,
    dynamic: true,
    namespaced: true,
    store
  })
  class ProductsManagerStoreModule extends VuexModule {}
  </code></pre>
  <p>But how we get the <code>store</code> instance in Nuxt TypeScript application?
  The Nuxt takes out the vuex store from us (same as routing and webpack control) to make the development simply, but here is the reverse effect.</p>
  <h2>Try to use the vuex store as usual</h2>
  <p>It's interesting, but it works in development environment, but not in production.</p>
  <p><strong>store/index.ts</strong></p>
  <pre class="lang-js prettyprint-override"><code>import Vuex, { Store } from &quot;vuex&quot;;
  
  
  export const store: Store&lt;unknown&gt; = new Vuex.Store({});
  
  
  export default store;
  </code></pre>
  <p><strong>pages/index.vue</strong></p>
  <pre><code>import { Component, Vue } from &quot;nuxt-property-decorator&quot;
  import { getModule } from &quot;nuxt-property-decorator&quot;;
  import TestStoreModule from &quot;./../Store/TestStoreModule&quot;;
  
  
  @Component
  export default class extends Vue {
  
    private readonly title: string = &quot;It Works!&quot;;
  
    private mounted(): void {
      console.log(&quot;=========&quot;);
      console.log(getModule(TestStoreModule).currentCount);
    }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/r3Qd3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r3Qd3.png" alt="enter image description here" /></a></p>
  <p><strong>store/TestStoreModule.ts</strong></p>
  <pre><code>import { Module, VuexModule, Mutation } from &quot;vuex-module-decorators&quot;;
  import store from &quot;./index&quot;;
  
  @Module({
    name: &quot;TestStoreModule&quot;,
    namespaced: true,
    dynamic: true,
    store
  })
  export default class TestStoreModule extends VuexModule {
  
    private count: number = 0
  
  
    @Mutation
    public increment(delta: number): void {
      this.count += delta
    }
    @Mutation
    public decrement(delta: number): void {
      this.count -= delta
    }
  
    public get currentCount(): number {
      return this.count;
    }
  }
  </code></pre>
  <p>But after production build, I have below error displaying in console:</p>
  <pre><code> ERROR  [nuxt] store/index.ts should export a method that returns a Vuex instance. 
  </code></pre>
  <p><a href="https://github.com/TokugawaTakesi/NuxtTypeScriptProjectFromScratch/tree/VuexProblem-Variant1" rel="nofollow noreferrer"> Application in above state (GitHub repository)</a> (The project structure a little bit different, I am sorry).</p>
  <p>I tried to fix it as has been told. Now, <code>store/index.ts</code> is:</p>
  <pre><code>// config.rawError = true;
  /* 〔 see 〕 https://develop365.gitlab.io/nuxtjs-2.1.0-doc/pt-BR/guide/vuex-store/ */
  export default function createStore(): Store&lt;unknown&gt; {
    return new Vuex.Store({});
  }
  </code></pre>
  <p>The <code>TestStoreModule</code> can not refer to <code>store</code> now (if can, how?).</p>
  <pre><code>@Module({
    name: &quot;TestStoreModule&quot;,
    namespaced: true,
    stateFactory: true
  })
  export default class TestStoreModule extends VuexModule { /* ... */ }
  </code></pre>
  <p>In the component, tried to access to store module as:</p>
  <pre><code>console.log(getModule(TestStoreModule, this.$store).currentCount);
  </code></pre>
  <p>The output is:</p>
  <p><a href="https://i.stack.imgur.com/K4nGX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K4nGX.png" alt="enter image description here" /></a></p>
  <p>Seems like the 'this' problem. If we output the <code>console.log(getModule(TestStoreModule, this.$store));</code> and call the <code>currentCount</code> from Chrome console:</p>
  <p><a href="https://i.stack.imgur.com/Jemcf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jemcf.png" alt="enter image description here" /></a></p>
  <p>we get the error:</p>
  <pre><code>Exception: TypeError: Cannot read property 'count' of undefined at Object.get
  (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:165:36) 
  at Object.r (&lt;anonymous&gt;:1:83)
  </code></pre>
  <p><a href="https://github.com/TokugawaTakesi/NuxtTypeScriptProjectFromScratch/tree/VuexProblem-Variant2" rel="nofollow noreferrer"> Application in above state (GitHub repository)</a></p>