Access to Vuex store state from a component using Nuxt
10,036
I recommend to use a module named toolbar
inside it put the following code :
export const state = () => ({
'toolbarActions' : [ 'My project', 'Home', 'About', 'Contact' ]
})
the folder structure should be like :
.
.
> static
v store
|_toolbar.js
and your computed
property should be like :
computed: {
toolbarActions() {
return this.$store.state.toolbar.toolbarActions //look i added the name of the toolbar module
// ^___________
}
}
}
Author by
user1592380
Updated on June 04, 2022Comments
-
user1592380 almost 2 years
I'm trying to pass a list of button names into a menu component from the Vuex store following https://nuxtjs.org/guide/vuex-store
my /store/store.js:
export const state = () => ({ 'toolbarActions' : [ 'My project', 'Home', 'About', 'Contact' ] })
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-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>
If I uncomment:
// return [ 'My project', 'Home', 'About', 'Contact' ]
and comment:
return this.$store.state.toolbarActions
The button names are passed into the component. but with
return this.$store.state.toolbarActions
not commented, nothing is passed in.
How do I access the Vuex store here to pass in the button names?
EDIT: I've made the changes, I'm getting:
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
-
Boussadjra Brahim over 5 yearswhat's the issue ?
-
user1592380 over 5 years@BoussadjraBrahim is that clearer?
-
Boussadjra Brahim over 5 yearsyes it's clear but i recommend to share the store code as text not as screenshot
-
user1592380 over 5 years@BoussadjraBrahim I've added ir above
-
Boussadjra Brahim over 5 yearsthe file name should be
toolbar.js
not_toolbar.js
please remove the_
-
user1592380 over 5 yearsI've made the changes. Its working! Based on this I understand the state.toolbar.toolbaractions. But where does "this.$store" come from?
-
Boussadjra Brahim over 5 yearsread this nuxtjs.org/guide/vuex-store#activate-the-store, nuxt will automatically inject
store
property inside vue instancenew Vue()
-
user1592380 over 5 yearsThanks very much!
-
user1592380 over 5 yearsfrom those docs - > We don't need to install vuex since it's shipped with Nuxt.js. We can now use this.$store inside our components: <template> <button @click="$store.commit('increment')">{{ $store.state.counter }}</button> </template>
-
Boussadjra Brahim over 5 yearsyou could but it's not a good practice, try to not put a lot of logic inside the template, something like
@click="'increment"
is more clean than@click="$store.commit('increment')"
-