我正在尝试将https://nuxtjs.org/guide/vuex-store之后的按钮名称列表传递给来自vuex存储的菜单组件
我的/store/store.js:
export const state = () => ({
'toolbarActions' : [ 'My project', 'Home', 'About', 'Contact' ]
})
我的菜单组件:
<template>
<v-toolbar color="indigo" dark>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title class="white--text">Title</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn flat v-for="action in toolbarActions" :key="action">{{action}}</v-btn>
<!-- <v-btn flat v-for="action in toolbarActions">{{action}}</v-btn> -->
<!-- <v-btn flat>Link One</v-btn>
<v-btn flat>Link Two</v-btn>
<v-btn flat>Link Three</v-btn> -->
</v-toolbar-items>
</v-toolbar>
</template>
<script>
// import toolbarActions from '~/store/store.js'
export default {
computed: {
toolbarActions() {
return this.$store.state.toolbarActions
// return [ 'My project', 'Home', 'About', 'Contact' ]
}
}
}
</script>
如果我没有评论:
// return [ 'My project', 'Home', 'About', 'Contact' ]
和评论:
return this.$store.state.toolbarActions
按钮名称将传递到组件中。但随着
return this.$store.state.toolbarActions
没有评论,什么也没有传递。
如何访问此处的vuex存储以传递按钮名称?
编辑:我进行了更改,我得到:
ERROR [Vue warn]: Error in render: "TypeError: Cannot read property
'toolbarActions' of undefined"
11:52:20
found in
---> <Menu> at components/menu.vue
<Default> at layouts/default.vue
<Root>
» store\_toolbar.js