TypeError: Vuex 4 및 Vue 3에서 사용할 때 정의되지 않은 속성 'getters'를 읽을 수 없습니다.

TypeError: Vuex 4 및 Vue 3에서 사용할 때 정의되지 않은 속성 'getters'를 읽을 수 없습니다.

저는 Vuex에 처음 와서 문제가 있어요.를 사용하여 앱을 제대로 서비스할 수 없는 경우npm run servelocalhost에서 앱을 열 수 있지만 아무것도 표시되지 않고 html 본문만 배경색으로 표시됩니다.이전 이야기npm run build

    F:\Javascript\CodeHighlighter>npm run build
    
    > code-highlighter@0.1.0 build F:\Javascript\CodeHighlighter
    > 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

그럼 내가 하지npm run serve

F:\Javascript\CodeHighlighter>npm run serve

> code-highlighter@0.1.0 serve F:\Javascript\CodeHighlighter
> 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

내가 열었을 때http://localhost:8080/콘솔을 엽니다.1개의 에러와 2개의 경고가 있다.

[Vue warn]: Property "$store" was accessed during render but is not defined on instance. 
  at <Header> 
  at <App>

[Vue warn]: Unhandled error during execution of render function 
  at <Header> 
  at <App>

Uncaught TypeError: Cannot read property 'getters' of undefined

제 전화번호부가 있습니다.

그리고 이게 내 전체 코드야

main.discloss.main.discloss.

    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);

store.displaces를 설정합니다.

    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: "https://highlight-code-api.jefrydco.vercel.app/api",
            langs: ["javascript", "python"]
        },
        getters:{
            getTitle:state=>{
                return state.title;
            },
            getCopyright:state=>{
                return state.copyright;
            },
            getAPI:state=>{
                return state.api;
            },
            getLangs:state=>{
                return state.langs;
            }
        }
    });

App.vue

    <template>
        <main>
            <app-header></app-header>
            <code-block></code-block>
            <app-footer></app-footer>
        </main>
    </template>
    
    <script>
    import Header from "./components/Header.vue";
    import Footer from "./components/Footer.vue";
    import CodeBlock from "./components/CodeBlock.vue";
    
    export default {
        components: {
            "app-header": Header,
            "code-block": CodeBlock,
            "app-footer": Footer,
        },
    };
    </script>

코드 블록표시하다

    <template>
        <div>
            <form>
                <strong class="monospace">Select Language</strong>
                <select v-model="lang" @change="highlight">
                    <option selected disabled>Choose Language</option>
                    <option v-bind:key="lan" v-for="lan in getLangs">{{ lan }}</option>
                </select>
            </form>
            <section class="code-container">
                <textarea class="code-block" v-model="code" @input="highlight" ></textarea>
                <div class="code-block formated" v-html="formated"></div>
            </section>
        </div>
    </template>
    
    <script>
        import axios from "axios";
        import { mapGetters } from 'vuex';
    
        export default {
            data: function() {
                return {
                    lang: "",
                    code: "",
                    formated: ""
                };
            },
            computed:{
                ...mapGetters([
                    'getAPI',
                    'getLangs',
                    'getFormated',
                    'getCode'
                ])
            },
            methods: {
                highlight() {
                    if (this.code == "") {
                        this.code = " ";
                    }
                    if (this.lang != "") {
                        axios
                            .post(
                                this.getAPI + `?lang=${this.lang}`,
                                {
                                    code: this.code
                                }
                            )
                            .then(res => {
                                this.formated = res.data.data;
                            });
                    } else {
                        this.formated = "<p class='monospace' style='color:azure;'>No language selected. Please select a language</p>";
                    }
                }
            }
        };
    </script>

패키지.json

    {
      "name": "code-highlighter",
      "version": "0.1.0",
      "private": true,
      "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": {
        "axios": "^0.20.0",
        "core-js": "^3.6.5",
        "vue": "^3.0.0",
        "vuex": "^4.0.0-beta.4"
      },
      "devDependencies": {
        "@vue/cli-plugin-babel": "~4.5.0",
        "@vue/cli-plugin-eslint": "~4.5.0",
        "@vue/cli-service": "~4.5.0",
        "@vue/compiler-sfc": "^3.0.0",
        "babel-eslint": "^10.1.0",
        "eslint": "^6.7.2",
        "eslint-plugin-vue": "^7.0.0-0"
      },
      "eslintConfig": {
        "root": true,
        "env": {
          "node": true
        },
        "extends": [
          "plugin:vue/vue3-essential",
          "eslint:recommended"
        ],
        "parserOptions": {
          "parser": "babel-eslint"
        },
        "rules": {}
      },
      "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
      ]
    }

github 저장소는 이쪽(https://github.com/PhilipPurwoko/CodeHighlighter/tree/restart)에서도 액세스 할 수 있습니다.당신의 답변에 정말 감사드립니다.감사합니다.

먼저 Vue 3의 Vuex 설명서를 읽어보십시오.그리고 Vue 인스턴스를 마운트하기 전에 vue 플러그인을 사용해야 한다는 가장 큰 실수를 발견했습니다.이렇게 생겼을 거예요.행운을 빕니다.

import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'

// Create vue instance
const app = createApp(App);

// Install the plugin first
app.use(store);

// Mount your app
app.mount('#app');

언급URL : https://stackoverflow.com/questions/64363921/typeerror-cannot-read-property-getters-of-undefined-when-serving-on-vuex-4-an