https://i.stack.imgur.com/htnuL.png
Seeking guidance on passing a list of button names into a menu component from the Vuex store as per the instructions at https://nuxtjs.org/guide/vuex-store
In my /store/store.js:
export const state = () => ({
'toolbarActions' : [ 'My project', 'Home', 'About', 'Contact' ]
})
Here's my menu component:
<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-toolbar-items>
</v-toolbar>
</template>
<script>
export default {
computed: {
toolbarActions() {
return this.$store.state.toolbarActions
}
}
}
</script>
Uncommenting the hardcoded return statement passes in the button names successfully. However, with the line referencing the Vuex store, nothing gets passed.
How can I correctly access the Vuex store to pass in the button names?
EDIT: After making some adjustments, I'm encountering the error:
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