title: How does Vuex 4 createStore() work internally
body: <p>I am having some difficulty understanding how Veux 4 <code>createStore()</code> works.</p>
  <p>In <code>/store/index.js</code> I have (amongst a few other things):</p>
  <pre><code>export function createVuexStore(){
     return createStore({
              modules: {
                  userStore,
                  productStore
              }
        })
  }
  
  export function provideStore(store) {
  provide('vuex-store', store)
  </code></pre>
  <p>}</p>
  <p>In <code>client-entry.js</code> I pass the store to <code>makeApp()</code> like this:</p>
  <pre><code>import * as vuexStore from './store/index.js';
  import makeApp from './main.js'
  const _vuexStore = vuexStore.createVuexStore();
  
  const {app, router} = makeApp({
      vuexStore: _vuexStore,
  });
  </code></pre>
  <p>And <code>main.js</code> default method does this:</p>
  <pre><code>export default function(args) {
      const rootComponent = {
          render: () =&gt; h(App),
          components: { App },
          setup() {
              vuexStore.provideStore(args.vuexStore)
          }
      }
  
      const app = (isSSR ? createSSRApp : createApp)(rootComponent);
      app.use(args.vuexStore);
  </code></pre>
  <p>So, there is no <code>store</code> that is exported from anywhere which means that I cannot import <code>store</code> in another <code>.js</code> file like my <code>vue-router</code> and access the <code>getters</code> or <code>dispatch</code> actions.</p>
  <pre><code>import {store} '../store/index.js' // not possible
  </code></pre>
  <p>In order to make this work, I did the following in the <code>vue-router.js</code> file which <em>works</em> but I don't understand why it works:</p>
  <pre><code>import * as vuexStore from '../store/index.js'
  const $store = vuexStore.createVuexStore();
  
  async function testMe(to, from, next) {
     $store.getters('getUser'); // returns info correctly
     $store.dispatch('logout'); // this works fine
  }
  </code></pre>
  <p>Does Veux's <code>createStore()</code> method create a fresh new store each time or is it a reference to the same store that was created in <code>client-entry.js</code>? It appears it is the latter, so does that mean an application only has one store no matter how many times you run <code>createStore()</code>? Why, then, does running <code>createStore()</code> not overwrite the existing store and initialise it with blank values?</p>