title: TypeError: Cannot read property 'getters' of undefined when serving on Vuex 4 and Vue 3
body: <p>I am new to Vuex and I have problem. I cannot serve my app properly using <code>npm run serve</code>. I can open the app on localhost but it display nothing, just html body with styled background color. Previously I do <code>npm run build</code></p>
  <pre><code>    F:\Javascript\CodeHighlighter&gt;npm run build
      
      &gt; code-highlighter@0.1.0 build F:\Javascript\CodeHighlighter
      &gt; vue-cli-service build
      
      
      -  Building for production...
      
       DONE  Compiled successfully in 6447ms                                                      08:44:40
      
        File                                 Size                         Gzipped
      
        dist\js\chunk-vendors.74c072d0.js    120.47 KiB                   42.78 KiB
        dist\js\app.f18138cd.js              5.18 KiB                     2.08 KiB
        dist\css\app.60b393b9.css            1.78 KiB                     0.65 KiB
      
        Images and other types of assets omitted.
      
       DONE  Build complete. The dist directory is ready to be deployed.
       INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
  
  </code></pre>
  <p>Then I do <code>npm run serve</code></p>
  <pre><code>F:\Javascript\CodeHighlighter&gt;npm run serve
  
  &gt; code-highlighter@0.1.0 serve F:\Javascript\CodeHighlighter
  &gt; vue-cli-service serve
  
   INFO  Starting development server...
  98% after emitting CopyPlugin
  
   DONE  Compiled successfully in 4139ms                                                      08:45:52
  
  
    App running at:
    - Local:   http://localhost:8080/
    - Network: http://192.168.0.116:8080/
  
    Note that the development build is not optimized.
    To create a production build, run npm run build
  </code></pre>
  <p>when I open <code>http://localhost:8080/</code> and open console. There is 1 error and 2 warning.</p>
  <pre><code>[Vue warn]: Property &quot;$store&quot; was accessed during render but is not defined on instance. 
    at &lt;Header&gt; 
    at &lt;App&gt;
  
  [Vue warn]: Unhandled error during execution of render function 
    at &lt;Header&gt; 
    at &lt;App&gt;
  
  Uncaught TypeError: Cannot read property 'getters' of undefined
  </code></pre>
  <p>There is my directory</p>
  <p><a href="https://i.stack.imgur.com/kmX0z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kmX0z.png" alt="Directory" /></a></p>
  <p>And there is my full code</p>
  <p><strong>main.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>    import { createApp } from 'vue'
      import { createStore } from 'vuex'
      import { store } from './store/store'
      import App from './App.vue'
      
      // console.log(store);
      
      const app = createApp(App).mount('#app');
      const vuestore = createStore(store);
      app.use(vuestore);
  </code></pre>
  <p><strong>store.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>
      import Vuex from 'vuex';
      
      export const store = new Vuex.Store({
          strict:true,
          state:{
              title: 'Code Highlighter',
              copyright:{
                  license : 'MIT',
                  author : 'Philip Purwoko',
                  repository : 'https://github.com/PhilipPurwoko/CodeHighlighter'
              },
              api: &quot;https://highlight-code-api.jefrydco.vercel.app/api&quot;,
              langs: [&quot;javascript&quot;, &quot;python&quot;]
          },
          getters:{
              getTitle:state=&gt;{
                  return state.title;
              },
              getCopyright:state=&gt;{
                  return state.copyright;
              },
              getAPI:state=&gt;{
                  return state.api;
              },
              getLangs:state=&gt;{
                  return state.langs;
              }
          }
      });
  
  </code></pre>
  <p><strong>App.vue</strong></p>
  <pre class="lang-html prettyprint-override"><code>    &lt;template&gt;
          &lt;main&gt;
              &lt;app-header&gt;&lt;/app-header&gt;
              &lt;code-block&gt;&lt;/code-block&gt;
              &lt;app-footer&gt;&lt;/app-footer&gt;
          &lt;/main&gt;
      &lt;/template&gt;
      
      &lt;script&gt;
      import Header from &quot;./components/Header.vue&quot;;
      import Footer from &quot;./components/Footer.vue&quot;;
      import CodeBlock from &quot;./components/CodeBlock.vue&quot;;
      
      export default {
          components: {
              &quot;app-header&quot;: Header,
              &quot;code-block&quot;: CodeBlock,
              &quot;app-footer&quot;: Footer,
          },
      };
      &lt;/script&gt;
  </code></pre>
  <p><strong>CodeBlock.vue</strong></p>
  <pre class="lang-html prettyprint-override"><code>
      &lt;template&gt;
          &lt;div&gt;
              &lt;form&gt;
                  &lt;strong class=&quot;monospace&quot;&gt;Select Language&lt;/strong&gt;
                  &lt;select v-model=&quot;lang&quot; @change=&quot;highlight&quot;&gt;
                      &lt;option selected disabled&gt;Choose Language&lt;/option&gt;
                      &lt;option v-bind:key=&quot;lan&quot; v-for=&quot;lan in getLangs&quot;&gt;{{ lan }}&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/form&gt;
              &lt;section class=&quot;code-container&quot;&gt;
                  &lt;textarea class=&quot;code-block&quot; v-model=&quot;code&quot; @input=&quot;highlight&quot; &gt;&lt;/textarea&gt;
                  &lt;div class=&quot;code-block formated&quot; v-html=&quot;formated&quot;&gt;&lt;/div&gt;
              &lt;/section&gt;
          &lt;/div&gt;
      &lt;/template&gt;
      
      &lt;script&gt;
          import axios from &quot;axios&quot;;
          import { mapGetters } from 'vuex';
      
          export default {
              data: function() {
                  return {
                      lang: &quot;&quot;,
                      code: &quot;&quot;,
                      formated: &quot;&quot;
                  };
              },
              computed:{
                  ...mapGetters([
                      'getAPI',
                      'getLangs',
                      'getFormated',
                      'getCode'
                  ])
              },
              methods: {
                  highlight() {
                      if (this.code == &quot;&quot;) {
                          this.code = &quot; &quot;;
                      }
                      if (this.lang != &quot;&quot;) {
                          axios
                              .post(
                                  this.getAPI + `?lang=${this.lang}`,
                                  {
                                      code: this.code
                                  }
                              )
                              .then(res =&gt; {
                                  this.formated = res.data.data;
                              });
                      } else {
                          this.formated = &quot;&lt;p class='monospace' style='color:azure;'&gt;No language selected. Please select a language&lt;/p&gt;&quot;;
                      }
                  }
              }
          };
      &lt;/script&gt;
  </code></pre>
  <p><strong>package.json</strong></p>
  <pre class="lang-json prettyprint-override"><code>
      {
        &quot;name&quot;: &quot;code-highlighter&quot;,
        &quot;version&quot;: &quot;0.1.0&quot;,
        &quot;private&quot;: true,
        &quot;scripts&quot;: {
          &quot;serve&quot;: &quot;vue-cli-service serve&quot;,
          &quot;build&quot;: &quot;vue-cli-service build&quot;,
          &quot;lint&quot;: &quot;vue-cli-service lint&quot;
        },
        &quot;dependencies&quot;: {
          &quot;axios&quot;: &quot;^0.20.0&quot;,
          &quot;core-js&quot;: &quot;^3.6.5&quot;,
          &quot;vue&quot;: &quot;^3.0.0&quot;,
          &quot;vuex&quot;: &quot;^4.0.0-beta.4&quot;
        },
        &quot;devDependencies&quot;: {
          &quot;@vue/cli-plugin-babel&quot;: &quot;~4.5.0&quot;,
          &quot;@vue/cli-plugin-eslint&quot;: &quot;~4.5.0&quot;,
          &quot;@vue/cli-service&quot;: &quot;~4.5.0&quot;,
          &quot;@vue/compiler-sfc&quot;: &quot;^3.0.0&quot;,
          &quot;babel-eslint&quot;: &quot;^10.1.0&quot;,
          &quot;eslint&quot;: &quot;^6.7.2&quot;,
          &quot;eslint-plugin-vue&quot;: &quot;^7.0.0-0&quot;
        },
        &quot;eslintConfig&quot;: {
          &quot;root&quot;: true,
          &quot;env&quot;: {
            &quot;node&quot;: true
          },
          &quot;extends&quot;: [
            &quot;plugin:vue/vue3-essential&quot;,
            &quot;eslint:recommended&quot;
          ],
          &quot;parserOptions&quot;: {
            &quot;parser&quot;: &quot;babel-eslint&quot;
          },
          &quot;rules&quot;: {}
        },
        &quot;browserslist&quot;: [
          &quot;&gt; 1%&quot;,
          &quot;last 2 versions&quot;,
          &quot;not dead&quot;
        ]
      }
  
  </code></pre>
  <p>You can also access my github repository at here (<a href="https://github.com/PhilipPurwoko/CodeHighlighter/tree/restart" rel="nofollow noreferrer">https://github.com/PhilipPurwoko/CodeHighlighter/tree/restart</a>). I really appreciate for all of your responses. Thank you</p>