Vue.js2.0 - vue reactivity confusion

Question

In my project , i have a shoppinglists Array to get displayed. When the component is mounted, the store is populated ( it' conatins only one array for the logged customer, fetched from the API db server... wo any problem)

On dissplay, I get the following message :

vue.esm.js?efeb:571 [Vue warn]: Property or method "shoppinglists" is not defined on 
the instance but referenced during render. Make sure that this property is reactive, 
either in the data option, or for class-based components, by initializing the 
property. 
See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

The shoppinglists property is defined as computed ...

computed: {
  ...mapGetters([ { shoppinglists: 'getShoppingLists' } ])
},

And the store contains the shoppinglists array

STATE

{
 "shoppinglists":
 [{"title":"Groceries","items":[{"text":"Bananas","checked":true},
 {"text":"Apples","checked":false}],"id":1,"userId":1}],
 "isAuthenticated":true,
 "currentUserId":1
 }

If I insert a prop declaration in data :

   data: function () {
  return {
    shoppinglists: []
  }
},

the warning disappear, but still theres is no list displayed..

what could be wrong ? thanks for feedback

not exactly duplicated question, but not far from this one

have you declared `getShoppingLists` getter? if so, can you post its declaration? — Evaldo Bratti, Nov 16 '17 at 17:41

score 4 · Accepted Answer · answered Nov 16 '17 at 17:41

4

It looks like you have mixed the two different options for mapGetters(). You can either write it like this:

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    // mix the getters into computed with object spread operator
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

Which maps this.doneTodosCount to this.$store.doneTodosCount and so on. Or you could do it this way, which is probably what you want:

...mapGetters({
  // map `this.doneCount` to `store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

And for your example this becomes:

computed: {
  ...mapGetters({ shoppinglists: 'getShoppingLists' })
},

More documentation and source of the examples are at the bottom of this article.

answered Nov 16 '17 at 17:41

awnton

639
1
5
16

thanks @awnton , however what's teh difference between what I wrote : computed: { ...mapGetters([ { shoppinglists: 'getShoppingLists' } ]) }, and what you mentioned (second option) : ...mapGetters({ // map `this.doneCount` to `store.getters.doneTodosCount` doneCount: 'doneTodosCount' }) – Nov 16 '17 at 17:56
1

You are passing an array to mapGetters() instead of an object. I.e you've accidentally wrapped `{ shoppinglists: 'getShoppingLists' }` in `[` `]`. So the only difference in my update of your example is that I removed the brackets. – awnton Nov 16 '17 at 17:59
Woow... I'm getting tired .. or I need to change my glasses... You're right ! better wo brackets !! – Nov 16 '17 at 18:34

Vue.js2.0 - vue reactivity confusion

1 Answers1