Vue 3 + vuex 스토어가 정의되지 않았습니다.

Vue 3 + vuex 스토어가 정의되지 않았습니다.

Vue 3 CLI를 사용하여 스토어 및 라우터의 새로운 테스트 기반을 설치하고 이를 학습했습니다.

프로젝트는 다음과 같습니다.

main.filename:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

createApp(App).use(store).use(router).mount("#app");

store.displays(테스트용 카운트만 추가):

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 0
  },
  mutations: {},
  actions: {},
  modules: {},
});

및 뷰:Home.vue:

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  mounted() {
    console.log(store.state.count)
  },
};
</script>

지금까지 읽은 바에 따르면 컴포넌트의 스토어에 접속할 수 있는 것은 다음과 같습니다.

mounted() {
        console.log(store.state.count)
      },

하지만 스토어는 정의되어 있지 않습니다.index.js의 메인 앱에서는 잊고 Import되어 사용되고 있습니다.

import store from "./store";
    
    createApp(App).use(store)

이 일에 몇 시간이나 걸렸어요. 조언해 주세요.이것은 바로 사용할 수 있는 CLI 설치입니다.무엇을 하라고 하는지 모르겠어요...

다음 방법으로 접근해야 합니다.this그리고 선두에$기호:

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  mounted() {
    console.log(this.$store.state.count)
  },
};

언급URL : https://stackoverflow.com/questions/67362238/vue-3-vuex-store-is-not-defined