Vue.js2.0 - vue 反应性混乱

Question

在我的项目中，我有一个要显示的购物清单数组。当组件被挂载时，存储被填充（它只包含一个用于记录客户的数组，从 API 数据库服务器获取......没有任何问题）

在显示时，我收到以下消息：

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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

shoppinglists 属性定义为计算...

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

并且商店包含购物清单数组

状态

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

如果我在数据中插入一个道具声明：

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

警告消失，但仍然没有显示列表..

可能有什么问题？ 感谢反馈

不完全重复的问题，但离this one不远

Answer 1

看起来您已经混合了 mapGetters() 的两个不同选项。 你可以这样写：

import { mapGetters } from 'vuex'

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

将this.doneTodosCount 映射到this.$store.doneTodosCount 等等。 或者你可以这样做，这可能是你想要的：

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

对于你的例子，这变成：

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

更多文档和示例来源在this article底部。