Vuex. Wie man Daten vom Speicher rendert, der v-für

Question

verwendet Ich habe APP mit Paarkomponenten. Ich verwende Vuex, um Daten zu speichern, damit ich sie in verschiedenen Komponenten verwenden kann. Jetzt muss ich einige divs mit v-for rendern. Ich wie folgt:

VueX/Module/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 
} 

Komponente, wo ich Daten verwenden:

<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> 

Es funktioniert, wenn ich Daten in die Daten der Komponente, aber ich kann es nicht funktionieren, wenn ich Daten in Vuex speichere.

Answer 1

, wenn Sie ein Modul verwenden, dann müssen Sie konfiguriert jenes in Ihrem Geschäft:

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

Dann, wenn Sie es innerhalb einer Komponente verweisen Sie auf das Modul rufen nicht den Root-Zustand:

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

Sie wollen wahrscheinlich das Modul so umbenennen shows.shows zu vermeiden, aber Sie sollten die Idee