Я использовал 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 из коробки, я не понимаю, что мне делать ...

0
ikiK 3 Май 2021 в 03:22

1 ответ

Лучший ответ

Вы должны получить к нему доступ, используя this и предваряя его знаком $:

export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  mounted() {
    console.log(this.$store.state.count)
  },
};
1
Boussadjra Brahim 3 Май 2021 в 00:25