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.

购物清单属性定义为计算...

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

商店包含购物清单数组

状态

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

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

   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 的底部。

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

Vue.js2.0 - vue reactivity confusion

vue.js

vuex