Vue 3 + vuex 存储未定义

Posted 2023-02-23

【中文标题】Vue 3 + vuex 存储未定义

【英文标题】：Vue 3 + vuex store is not defined

【发布时间】：2021-07-25 11:17:02

【问题描述】：

我使用 Vue 3 cli 为 store 和 router 安装了新的测试场来学习这些。

项目是这样的：

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

在视图中： 主页.vue：

<template>
  <div class="home">
    <img  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 安装，我不明白他们不会让我做什么......

【参考方案1】：

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

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