Nuxt를 사용하는 구성 요소에서 Vuex 저장소 상태에 액세스

Nuxt를 사용하는 구성 요소에서 Vuex 저장소 상태에 액세스

https://nuxtjs.org/guide/vuex-store에 이어 Vuex 스토어에서 버튼 이름 목록을 메뉴 컴포넌트로 전달하려고 합니다.

my /store/store.filename:

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   

다음 모듈 사용을 권장합니다.toolbar그 안에 다음 코드를 입력합니다.

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

폴더 구조는 다음과 같습니다.

.
.
> static
v store
  |_toolbar.js

그리고 당신의computed속성은 다음과 같습니다.

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'
})

언급URL : https://stackoverflow.com/questions/53989147/access-to-vuex-store-state-from-a-component-using-nuxt