我有几个组件的应用程序。我使用 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 中,我就不能让它工作。
最佳答案
如果您正在使用一个模块,那么您需要在您的商店中配置它:
# 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
但您应该明白这一点
关于vue-component - Vuex。如何使用 v-for 从 store 渲染数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40707578/