Question

Vuex 存储 this.$store 在 Vue.js 组件中未定义

2018-06-14

3442

javascript vue.js vuex

我有一个新的使用 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/>"
});