Vue 3 + vuex 商店未定义

Question

我使用 Vue 3 cli 为商店和路由器安装了新的测试平台来学习这些。

项目是这样的：

main.js:

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.js（为测试添加的计数）：

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 store from "./store";
    
    createApp(App).use(store)

我花了几个小时在这上面，请指教。这是开箱即用的 cli 安装，我不明白他们要我做什么...

Answer 1

您必须使用 this 并在前面加上 $ 符号来访问它：

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

Vue 3 + vuex 商店未定义

Vue 3 + vuex store is not defined

vue.js

vue-component

vuex

vuejs3

vuex4