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 ...

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

商店包含购物清单数组

STATE

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

Vue.js2.0 - vue反应混乱

1 个答案: