Vuex状态未定义

Question

版本："vue"："^2.5.2"，“vue-路由器”："^3.0.1"，"vuetify"："^1.0.0"，"vuex"："^3.0.1“

我有一个简单的vuex存储，有一个状态属性(MeetUps)和两个getter(featuredMeetups& listMeetups)。featuredMeetups很好，当我做控制台日志时，我可以看到对象数组。但是，listMeetups还没有定义，我已经尝试了很长一段时间了，请有人告诉我为什么其中一个会工作，而不是另一个。

/* eslint-disable */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        meetUps: [
        {
            imageUrl: 'https://www.seetorontonow.com/wp-content/uploads/2017/12/cn-tower-dusk.jpg', 
            id: 0, 
            title: 'Meetup in Toronto', 
            date: '2018-08-01'
        },
        {
            imageUrl: 'https://dminc.com/wp-content/uploads/2017/09/Montreal-copy.jpg', 
            id: 1, 
            title: 'Meetup in Montreal', 
            date: '2018-08-09'
        },
        {
            imageUrl: 'https://www.tripsavvy.com/thmb/Rps6KG7F6Fc1lXtcSaGZJJ3oVE4=/960x0/filters:no_upscale():max_bytes(150000):strip_icc()/quebec-city-skyline-in-winter-548633225-5986417f22fa3a001072905e.jpg', 
            id: 3, 
            title: 'Meetup in Qubec City', 
            date: '2018-08-19'
        }
      ]
    },
    mutations: {},
    actions:{},
    getters: {
        featuredMeetups: state => {
            return state.meetUps.splice(0,5)
        },
        listMeetups: state => {
            return state.meetUps
        }
    }

})
//Vue componenet
<template>
  <v-container>
   <v-layout row wrap v-for="meetup in meetups" :key="meetup.id" class="mb-2">
    <v-flex xs12 sm10 md8 offset-sm1 offset-md2>
     <v-card color="blue-grey light-2" class="white--text">
      <v-container fluid>
       <v-layout xs5>
        <v-flex xs5 sm4 md3>
         <v-card-media class="white--text elevation-20" height="130px" :src="meetup.imageUrl">
          </v-card-media>
        </v-flex>
        <v-flex xs7 sm8 md3>
         <v-card-title primary-title>
          <div>
           <h3 class="white--text" mb0>{{ meetup.title }}</h3>
            <div>{{ meetup.date }}</div>
          </div>
         </v-card-title>
          <v-card-actions>
           <v-btn flat to="/meetup/1">
            <v-icon left light>arrow_forward</v-icon>
              View Meetups
           </v-btn>
          </v-card-actions>
    </v-flex>
    </v-layout>
     </v-container>
      </v-card>
     </v-flex>
      </v-layout>
  </v-container>
</template>


<script>
export default {
 computed: {
  meetups () {
    //return this.$store.state.meetUps
    return this.$store.getters.listMeetups
    }
 }
}
</script>

Answer 1

实际上，您使用的是splice而不是slice JavaScript方法。这是两种不同的行为。

• splice()方法向数组添加/移除项，并返回删除的项。
• slice()方法作为新的数组对象返回数组中的选定元素。

在这里，您可以找到您的问题解决使用片;) https://codesandbox.io/s/52031kl03x