Vue.js 2.0 - vue 반응성의 혼란

Vue.js 2.0 - vue 반응성의 혼란

프로젝트에서는 쇼핑리스트 Array를 표시하고 있습니다.컴포넌트가 마운트되면 스토어가 채워집니다(API DB 서버에서 가져온 로깅된 고객에 대한 어레이는 1개뿐입니다).문제 없음)

디스플레이에서 다음과 같은 메시지가 나타납니다.

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: []
  }
},

경고는 사라지지만 목록이 표시되지 않습니다.

무엇이 문제일까요? 피드백 감사합니다.

정확히 중복된 질문은 아니지만 이 질문에서 멀지 않은 곳에 있다

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' })
},

이 예제의 상세한 문서와 출처는, 이 문서의 하부에 기재되어 있습니다.

언급URL : https://stackoverflow.com/questions/47335560/vue-js2-0-vue-reactivity-confusion