[Vue warn] :렌더 오류: "TypeError: 정의되지 않은 속성 'getters'를 읽을 수 없습니다."

[Vue warn] :렌더 오류: "TypeError: 정의되지 않은 속성 'getters'를 읽을 수 없습니다."

이것은 내 앱입니다.js 항목을 올바르게 정의했습니까?내 일을 제대로 한 것 같아!vuex 문서에 따라

import store from "./store";
require('./bootstrap');
window.Vue = require('vue').default;
import vuetify from "./vuetify";
import router from "./router";
import AppComponent from "./components/AppComponent";
import Store from  "./store"
const app = new Vue({
  el: '#app',
  vuetify,
  router,
  Store,
  components:{
    "app-component":AppComponent,
  }
});

여긴 내 가게야

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 => {
      switch (state.level) {
        case "super-admin":
          return SuperAdminRoute;
        case "department":
          return departmentRoute;
        default:
          return studentRoute;
      }
    }
  }
})

앱 컴포넌트 스크립트입니다.

<script>
import { mapGetters } from 'vuex'

export default {
  name: "MainDashboard",
  props: {
      source: String,
  },
  computed: {
    ...mapGetters(['items'])
  },
  data: () => ({
    drawer: null,
    title:'فاد | فارغ التحصیلی ناد',
  }),
  methods:{
    logout() {
      axios.post('/api/logout').then(res=>{
        localStorage.removeItem('token');
        localStorage.removeItem('role');
        this.$router.push('/login');
      }).catch(err=>{
      });
    }
  }
}
</script>

컴포넌트넷에서 맵게터를 사용하면 vuex 탭에서 게터를 얻을 수 있지만 컴포넌트 계산 속성에서는 얻을 수 없습니다! 왜일까요?트러블 슈팅 방법이 오류는 Import vuex가 잘못되었기 때문일 수 있습니다.

Vuex 탭:

컴포넌트:

다음과 같이 store in app.js 또는 main.js를 사용해야 합니다.

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
  store
}).$mount("#app");

라고 하면import {store} from "./store";이 에러가 발생합니다.

나는 이 줄을 에서 바꿨다.

import Store from  "./store"

대상:

import store from  "./store"

그리고 나의 문제는 해결되었다!

언급URL : https://stackoverflow.com/questions/67768905/vue-warn-error-in-render-typeerror-cannot-read-property-getters-of-undef