Vue.js Vuex子组件无法访问此。$store（未定义）

我遵循从Vue组件访问Vuex状态的步骤。。。但每当我在我的组件中使用这个.store.something时，我就会得到TypeError：无法读取未定义的属性'something'，请参阅本文底部的屏幕截图

文件上说,

通过向根实例提供store选项，存储将 注入根目录的所有子组件，并将可用 在他们身上是这样的。$store

…但该功能在我的应用程序中似乎不起作用

这是我的密码：

main.js

App.vue

Header.vue

错误：

---

代码中的一切看起来都很好。但是，在main.js文件中更改以下代码

new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

---

代码中的一切看起来都很好。但是，在main.js文件中更改以下代码

new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

---

将存储导入main.js文件时，请使用解构

从更改代码

import Vue from 'vue'
import App from './App'
import axios from 'axios'
import router from './router'
import store from './store'

Vue.config.productionTip = false
axios.defaults.baseURL = 'http://localhost:3000'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

到

---

它对我有用…希望它对你也有用

在将存储导入main.js文件时使用解构

从更改代码

import Vue from 'vue'
import App from './App'
import axios from 'axios'
import router from './router'
import store from './store'

Vue.config.productionTip = false
axios.defaults.baseURL = 'http://localhost:3000'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

到

---

---

它对我有用…希望它对你也有用

谢谢！我照你说的做了，但不幸的是，这并没有解决我的问题这两者有什么不同？我不确定是否有什么不同，但这对我来说是有效的。您能否显示生成的提升错误。我指的是这个.$store.dispatch'tryAutoLogin'当你说它适合你时，你的意思是你试着用修改过的代码来运行我的代码，结果成功了吗？我已经在我的帖子底部附上了一个错误截图。如果这个答案中的代码是必需的，OP将得到一个不同的错误。它会说您使用的是Vue的仅运行时版本，而模板编译器不可用。要么将模板预编译成呈现函数，要么使用包含buildYes的编译器。我说它对我有效，因为我实现了与您相同的身份验证代码，只做了少许修改。但多亏了Phil，他在你的代码中发现了问题，并为我的代码添加了更多的亮点。谢谢！我照你说的做了，但不幸的是，这并没有解决我的问题这两者有什么不同？我不确定是否有什么不同，但这对我来说是有效的。您能否显示生成的提升错误。我指的是这个.$store.dispatch'tryAutoLogin'当你说它适合你时，你的意思是你试着用修改过的代码来运行我的代码，结果成功了吗？我已经在我的帖子底部附上了一个错误截图。如果这个答案中的代码是必需的，OP将得到一个不同的错误。它会说您使用的是Vue的仅运行时版本，而模板编译器不可用。要么将模板预编译成呈现函数，要么使用包含buildYes的编译器。我说它对我有效，因为我实现了与您相同的身份验证代码，只做了少许修改。但多亏了Phil，他在你的代码中发现了问题，并为我的代码增添了更多的亮点。你试图访问的“东西”是什么？如果是“token”，则需要此。$store.state.token，或者如果是操作，则需要此。$store.dispatch。？？@Andrew1325我正在尝试访问此。$store.dispatch'tryAutoLogin'在App.vue中，以及此。$store.state.token在Header.vue中。我已将Header.vue的代码和错误的屏幕截图附加到帖子的底部。在store.js中，从“vue”导入vue看起来是错误的。导入应该来自“vue”所有小写字母，不过我想如果您使用的是不区分大小写的文件系统，那么如果您使用console.log this.$store，您会得到什么？如果它未定义，如果您将其记录到控制台，您会得到什么？@Phil Wow，您是对的！问题是我将“Vue”大写。如此微小的错误破坏了一切。有没有一种方法可以通知像这样的小错误？webpack dev服务器编译器未捕获它。您试图访问的“某物”是什么？如果是“token”，则需要此。$store.state.token，或者如果是操作，则需要此。$store.dispatch。？？@Andrew1325我正在尝试访问此。$store.dispatch'tryAutoLogin'在App.vue中，以及此。$store.state.token在Header.vue中。我已将Header.vue的代码和错误的屏幕截图附加到帖子的底部。在store.js中，从“vue”导入vue看起来是错误的。导入应该来自“vue”所有小写字母，不过我想如果您使用的是不区分大小写的文件系统，那么如果您使用console.log this.$store，您会得到什么？如果它未定义，如果您将其记录到控制台，您会得到什么？@Phil Wow，您是对的！问题是我将“Vue”大写。如此微小的错误破坏了一切。有没有一种方法可以通知像这样的小错误？webpack dev服务器编译器未捕获它。

new Vue({
 el: '#app',
 router,
 store,
 components: { App },
 template: '<App/>'
})

new Vue({
   el: "#app",
   router,
   store,
   render: h => h(App)
});

import Vue from 'vue'
import App from './App'
import axios from 'axios'
import router from './router'
import store from './store'

Vue.config.productionTip = false
axios.defaults.baseURL = 'http://localhost:3000'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

import Vue from 'vue'
import App from './App'
import axios from 'axios'
import router from './router'
import { store } from './store' //Added Destructuring

Vue.config.productionTip = false
axios.defaults.baseURL = 'http://localhost:3000'

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})