尝试读取vuex状态时未定义

Question

遵循VueMaster课程中的一个简单示例，似乎无法从存储中读取状态。这是我的main.js:

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
import App from './App.vue'
import router from './router'
import store from './store'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

这是我在/store文件夹中的index.js:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: { id: 'abc123', name: 'Adam Jahr' },
},
mutations: {},
actions: {},
modules: {}
})

然后，我尝试从一个组件读取状态对象：

<template>
<div>
<h1>Create an Event, {{ $store.state.user.name }}</h1>
</div>
</template>

我在浏览器中看不到该组件的任何内容。控制台显示一个错误"；TypeError:无法读取未定义的"的属性"name"；。

你知道为什么这个简单的例子不起作用吗？谢谢

Answer 1

您的导入不应该是这样的吗：

import store from './store/index'

由于这是您创建存储的地方，请检查文件夹结构，也许这就是问题所在。

Answer 2

我没有发现您的代码有任何问题，它正在按预期工作。

这里是沙箱链接-https://codesandbox.io/s/silly-poitras-sosvs?file=/src/App.vue

Answer 3

您需要在组件中提供存储类似计算的东西返回此$store.state.user