Vuex state undefined

Question

Versions: "vue": "^2.5.2", "vue-router": "^3.0.1", "vuetify": "^1.0.0", "vuex": "^3.0.1"

I have a simple vuex store with 1 state property(meetUps) and 2 getters(featuredMeetups & listMeetups). featuredMeetups is fine, when i do console log i can see the array of objects. But, listMeetups is undefined, I have been trying to figure out for a long time, can someone please tell me why one would work and not the other

/* 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>

@BennettDams: edited the code to show the vue componenet where i call the getters — sab
I think you mean to use slice instead of splice, which removes elements from an array. — coyotte508
Your Vuex is probably not installed correctly, check these scenarios: forum.vuejs.org/t/vuex-undefined-getters/5728/4 — Bennett Dams

Thomas Brd Thomas Brd · Accepted Answer · 2018-08-03T20:44:33

In fact you are using splice rather than slice JavaScript method. It's two diferents behaviours.

The splice() method adds/removes items to/from an array, and returns the removed item(s).
The slice() method returns the selected elements in an array, as a new array object.

Here you can find your problem solved using slice ;) https://codesandbox.io/s/52031kl03x

Vuex state undefined

1 Answers