Vuex。 v-forを使用してストアからデータをレンダリングする方法

Question

私はカップルのコンポーネントでappを持っています。私はVuexを使ってデータを保存するので、別のコンポーネントで使うことができます。今では、v-forを使っていくつかのdivをレンダリングする必要があります。私は、コンポーネントのデータ内のデータを持っている場合、それは動作します

<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 /モジュール/ 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 
} 

私がデータを使用する必要があるコンポーネント：私は次のように行います私は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を避けるために、モジュールの名前を変更したいが、あなたはそれが嘆願を助けた場合