title: [Vue warn]: Error in render: "TypeError: Cannot read property 'getters' of undefined"
body: <p>this is my app.js
  Have I defined the items correctly?
  I think I did my job right! In accordance with the vuex document</p>
  <pre class="lang-js prettyprint-override"><code>import store from &quot;./store&quot;;
  require('./bootstrap');
  window.Vue = require('vue').default;
  import vuetify from &quot;./vuetify&quot;;
  import router from &quot;./router&quot;;
  import AppComponent from &quot;./components/AppComponent&quot;;
  import Store from  &quot;./store&quot;
  const app = new Vue({
    el: '#app',
    vuetify,
    router,
    Store,
    components:{
      &quot;app-component&quot;:AppComponent,
    }
  });
  </code></pre>
  <p>this is my store.js</p>
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue'
  import Vuex from  'vuex'
  Vue.use(Vuex)
  
  const departmentRoute= [
    { icon: 'mdi-account-badge-outline', text: 'مدیریت  مطالبات   ' ,link:'demands'},
    { icon: 'mdi-account-badge-outline', text: 'مدیریت  گزارشات   ' ,link:'reports'},
  ];
  const SuperAdminRoute= [
    { icon: 'mdi-account-group-outline', text: '  مدیریت کاربران ' ,link:'users'},
    { icon: 'mdi-account-badge-outline', text: 'مدیریت  مطالبات   ' ,link:'demands'},
    { icon: 'mdi-account-badge-outline', text: 'مدیریت  گزارشات   ' ,link:'reports'},
    { icon: 'mdi-account-badge-outline', text: 'آمار و ارقام     ' ,link:'demands'},
  ];
  const studentRoute= [
    { icon: 'mdi-account-group-outline', text: 'آخرین مطالبات به رای گذاشته شده' ,link:'selfDemand'},
    { icon: 'mdi-account-group-outline', text: 'مطالبات من  ' ,link:'selfDemand'},
    { icon: 'mdi-account-badge-outline', text: ' پیگیری مطالبه   ' ,link:'addReport'},
    { icon: 'mdi-checkbox-marked-circle-outline', text: 'تایید حساب کاربری' ,link:'verify'},
  ];
  export default new Vuex.Store({
    state: {
      level: localStorage.getItem('role')
    },
    getters: {
      items: state =&gt; {
        switch (state.level) {
          case &quot;super-admin&quot;:
            return SuperAdminRoute;
          case &quot;department&quot;:
            return departmentRoute;
          default:
            return studentRoute;
        }
      }
    }
  })
  </code></pre>
  <p>and this is my app component script:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
  import { mapGetters } from 'vuex'
  
  export default {
    name: &quot;MainDashboard&quot;,
    props: {
        source: String,
    },
    computed: {
      ...mapGetters(['items'])
    },
    data: () =&gt; ({
      drawer: null,
      title:'فاد | فارغ التحصیلی ناد',
    }),
    methods:{
      logout() {
        axios.post('/api/logout').then(res=&gt;{
          localStorage.removeItem('token');
          localStorage.removeItem('role');
          this.$router.push('/login');
        }).catch(err=&gt;{
        });
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>when i use map getters in my componenet i can get my getters in vuex tab but i can't get it in component computed property !
  why ?
  How can I troubleshoot?Could this error be due to invalid import vuex ?</p>
  <p>Vuex Tab :</p>
  <p><a href="https://i.stack.imgur.com/q348b.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q348b.png" alt="enter image description here" /></a></p>
  <p>component :</p>
  <p><a href="https://i.stack.imgur.com/JW3jU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JW3jU.png" alt="enter image description here" /></a></p>