使用Nuxt从组件访问Vuex存储状态

JavaScript Vue.js

樱小胖Mandy

2020-04-03

在此处输入图片说明

我正在尝试将https://nuxtjs.org/guide/vuex-store之后的按钮名称列表传递给来自vuex存储的菜单组件

我的/store/store.js:

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   

第3941篇《使用Nuxt从组件访问Vuex存储状态》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android