Question

版本： “ vue”：“ ^ 2.5.2”， “ vue-router”：“ ^ 3.0.1”， “ vuetify”：“ ^ 1.0.0”， “ vuex”：“ ^ 3.0.1”

我有一个简单的vuex存储，其中包含1个状态属性（meetUps）和2个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()方法 将数组中选定的元素作为新的数组对象返回 。

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

Vuex状态未定义

1 个答案: