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，但你應該得到的想法