Vuex。如何使用 v-for 从存储中渲染数据

Question

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

VueX/Modules/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，但你应该明白