I'm trying to pass a list of button names into a menu ponent from the Vuex store following

my /store/store.js:

export const state = () => ({
    'toolbarActions' : [ 'My project', 'Home', 'About', 'Contact' ]
})

My menu ponent:

<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 {
puted: {
  toolbarActions() {
          return this.$store.state.toolbarActions

          // return [ 'My project', 'Home', 'About', 'Contact' ]
  }
  }
}
</script>

If I unment:

      // return [ 'My project', 'Home', 'About', 'Contact' ]

and ment:

          return this.$store.state.toolbarActions

The button names are passed into the ponent. but with

 return this.$store.state.toolbarActions

not mented, 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 ponents/menu.vue
   <Default> at layouts/default.vue
     <Root>

 » store\_toolbar.js   

I'm trying to pass a list of button names into a menu ponent from the Vuex store following https://nuxtjs/guide/vuex-store

my /store/store.js:

export const state = () => ({
    'toolbarActions' : [ 'My project', 'Home', 'About', 'Contact' ]
})

My menu ponent:

<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 {
puted: {
  toolbarActions() {
          return this.$store.state.toolbarActions

          // return [ 'My project', 'Home', 'About', 'Contact' ]
  }
  }
}
</script>

If I unment:

      // return [ 'My project', 'Home', 'About', 'Contact' ]

and ment:

          return this.$store.state.toolbarActions

The button names are passed into the ponent. but with

 return this.$store.state.toolbarActions

not mented, 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 ponents/menu.vue
   <Default> at layouts/default.vue
     <Root>

 » store\_toolbar.js   

• javascript
• vue.js
• vuejs2
• vuex
• nuxt.js

• what's the issue ? – Boussadjra Brahim Commented Dec 31, 2018 at 15:53
• @BoussadjraBrahim is that clearer? – user1592380 Commented Dec 31, 2018 at 15:56
• yes it's clear but i remend to share the store code as text not as screenshot – Boussadjra Brahim Commented Dec 31, 2018 at 16:03
• 1 Thanks very much! – user1592380 Commented Dec 31, 2018 at 18:17
• 1 from those docs - > We don't need to install vuex since it's shipped with Nuxt.js. We can now use this.$store inside our ponents: <template> <button @click="$store.mit('increment')">{{ $store.state.counter }}</button> </template> – user1592380 Commented Dec 31, 2018 at 19:17

2 Answers 2

I remend 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 puted property should be like :

puted: {
  toolbarActions() {
      return this.$store.state.toolbar.toolbarActions  //look i added the name of the toolbar module
                              // ^___________

  }
 }
}

Better option may be

import {mapGetters} from 'vuex';

and use like

puted:mapGetters({
    toolbarActions:'toolbar/toolbarActions'
})