Vuex。如何从商店使用v-for呈现数据

Question

我有几个组件的应用程序。我使用Vuex来存储数据，所以我可以在不同的组件中使用它。现在我需要使用v-for渲染一些div。我做如下：

VueX /模块/ shows.js

const state = { 
shows: [ 
    { 
    name: 'Hard Luck', 
    venue: 'The Venue', 
    time: '6:00 pm' 
    }, 
    { 
    name: 'Hard Luck', 
    venue: 'The Venue', 
    time: '6:00 pm' 
    } 
] 
} 

export default { 
state 
} 

组件，我需要使用数据：

<template> 
    <div class="dashboard__details dashboard__details--shows" 
     v-for="show in shows"> 
    <h3 class="dashboard__name"> 
     {{show.name}} @ {{show.venue}}  
    </h3> 
    <span class="dashboard__time">{{show.time}}</span> 
    <div class="dashboard__btnBlock"> 
     <button">Details</button> 
    </div> 
    </div> 
    </template> 

    <script> 
    import { mapState } from 'vuex' 
    import ReportIssue from './ReportIssue' 
    import InviteFriend from './InviteFriend' 

    export default { 
    name: 'dashboard', 
    components: { ReportIssue, InviteFriend }, 
    computed: mapState({ 
     shows: state => { 
     return state.shows 
     } 
    }) 
    } 
    </script> 

它的工作原理，如果我有在组件的数据，但我的数据如果我将数据存储在Vuex中，则无法工作。

Answer 1

如果你使用一个模块，那么你需要配置的，你的商店内：

# your Vuex store 
import shows from './VueX/Modules/shows.js' 
export default new Vuex.Store({ 
    modules: { 
    shows, 
    }, 
    ... 

然后，当你在组件中引用它调用模块不是根状态：

export default { 
    name: 'dashboard', 
    components: { ReportIssue, InviteFriend }, 
    computed: mapState({ 
    shows: ({ shows }) => shows.shows 
    }) 
} 

您可能想重命名模块，以避免shows.shows，但你应该得到的想法