Javascript 使用Nuxt从组件访问Vuex存储状态
我正在尝试将按钮名称列表从Vuex存储区传递到菜单组件中,如下所示 my/store/store.js:Javascript 使用Nuxt从组件访问Vuex存储状态,javascript,vue.js,vuejs2,vuex,nuxt.js,Javascript,Vue.js,Vuejs2,Vuex,Nuxt.js,我正在尝试将按钮名称列表从Vuex存储区传递到菜单组件中,如下所示 my/store/store.js: export const state = () => ({ 'toolbarActions' : [ 'My project', 'Home', 'About', 'Contact' ] }) 我的菜单组件: <template> <v-toolbar color="indigo" dark> <v-toolbar-side-icon
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 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
ERROR[Vue warn]:呈现中出错:“TypeError:无法读取属性
未定义的“工具栏操作”
11:52:20
发现于
--->在components/menu.vue上
在layouts/default.vue处
»store\\u toolbar.js
我建议使用名为工具栏的模块将以下代码放入其中:
export const state = () => ({
'toolbarActions' : [ 'My project', 'Home', 'About', 'Contact' ]
})
文件夹结构应类似于:
.
.
> static
v store
|_toolbar.js
computed: {
toolbarActions() {
return this.$store.state.toolbar.toolbarActions //look i added the name of the toolbar module
// ^___________
}
}
}
您的计算属性应该是:
.
.
> static
v store
|_toolbar.js
computed: {
toolbarActions() {
return this.$store.state.toolbar.toolbarActions //look i added the name of the toolbar module
// ^___________
}
}
}
更好的选择可能是
import {mapGetters} from 'vuex';
和使用一样
computed:mapGetters({
toolbarActions:'toolbar/toolbarActions'
})
有什么问题吗?@BoussadjraBrahim更清楚吗?是的,很清楚,但我建议将商店代码作为文本而不是截图共享。非常感谢!从这些文档->我们不需要安装vuex,因为它随Nuxt.js一起提供。我们现在可以在组件中使用这个。$store:{{$store.state.counter}