Vuex存儲此。$ store在Vue.js組件中未定義

Question

我有一個使用Vuex的新vue-cli webpack項目。 我在store.js中初始化了我的Vuex商店，如下所示：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {}
});

export default store;

在我的App.vue中，我從'./store.js'導入存儲，它工作正常，但是this.$store是未定義的。 我錯過了什么？

這是我的App.vue

<script>
import Navigation from "@/components/Navigation";
import axios from "axios";
import store from "./store";
export default {
  created() {
    console.log("store from $store", this.$store);
    console.log("store from store: ", store);
  }
}
</script>

第二個console.log(store)工作得很好。

Answer 1

我找到了解決方案。 在我的main.js中，我沒有在Vue實例上設置商店。 對於其他任何陷入困境的人來說，這就是你所需要的： main.js

import Vue from "vue";
import App from "./App";
import router from "./router";
import store from "./store"; // this
require("./assets/styles/main.scss");

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  router,
  store, // and this
  components: { App },
  template: "<App/>"
});