Vuex의 세 마침표 구문?

Vuex의 세 마침표 구문?

저는 지도 국가가 무엇을 하는지 확신하지 못합니다. 그것 말고는... 그 앞에 있는 것이 무엇을 의미하는지 말이죠.가이드에서는, 예를 들면 「리포트」라고 기재되어 있습니다.

computed: {
  ...mapState({
    messages: state => state.messages
  })
}

Vuex를 사용하여 대규모 애플리케이션을 구축하는 경우

매장을 분리하는 대신 한 곳에서 관리해야 합니다.

예를 들어, 대규모 스토어가 있고 스토어에는 다음과 같은 여러 주가 있습니다.

const store =
{
    states: 
    {
        todo:
        {
             notes   : { ... },
             username: { ... },
             nickname: { ... }
        },
        checklist:
        {
             list: { ... }
        }
    } 
}

쓰고 싶으면 이렇게 하면 돼

computed:
{
    ...mapState(['todo', 'checklist'])
}

그러니 당신은 할 필요가 없다

computed:
{
    todo()
    {
        return this.$store.state.todo
    },
    checklist()
    {
        return this.$store.state.checklist
    }
}

이렇게 사용하시면 됩니다.

todo.notes
todo.usernames
checklist.list

@Can Rau가 답변했듯이 h3ll이 "구문 확산"이 무엇인지 좀 더 명확히 설명하겠습니다....실제로 하다mapGetter,mapState그리고.mapActionsVuex에 있습니다.

먼저 직접 사용할 수 있습니다.mapState다음과 같이 합니다.computed: mapState확산 구문 없음...로컬 계산 속성이 없는 경우.

에 대해서도 마찬가지입니다.mapGetters그리고.mapActions

computed: mapState({
    count: state => state.count,
    },

computed: {
  ...mapState({
     count: state => state.count,
  })
}

위의 두 가지 모두 정확히 같은 일을 합니다!

그러나 로컬 계산 속성이 있는 경우 구문 확산이 필요합니다.

이는 mapState가 객체를 반환하기 때문입니다.그리고 여러 개체를 하나로 병합할 개체 확산 연산자가 필요합니다.

computed: {
  localComputed () { /* ... */ },
  // mix this into the outer object with the object spread operator
  ...mapState({
    // ...
  })
}

MDN에서 개체 리터럴 확산에 대한 자세한 내용을 볼 수 있습니다.

기본적으로, 이 상황에서는 오브젝트를 병합하는 데 사용되었습니다.

let obj = {a: 1, b: 2, c: 3}
let copy = {...obj}
// copy is {a: 1, b: 2, c: 3}

//without ..., it will become wrong
let wrongCopy = {obj}
// wrongCopy is { {a: 1, b: 2, c: 3} } - not what you want

Vuex Docs는 이를 매우 명확하게 설명합니다.좀 더 자세히 보면 알 수 있을 거예요.

언급URL : https://stackoverflow.com/questions/39854956/three-periods-syntax-in-vuex