Vue.js에 저장 패턴 구현

Question

Vue.js에 저장 패턴을 구현하려고하는데 막혔습니다. 나는 소품을 통해 공유 상태가 전달되는 두 개의 하위 구성 요소를 가지고 있습니다. 각 자식 구성 요소는 전달 된 소품과 다른 것을 수행합니다. comp-a에는 사용자가 목록에 단어를 추가하거나 목록을 모두 비울 수있는 입력 및 두 개의 단추가 있으며 comp-b은 단어 배열을 매핑하고 표시하는 역할을 담당합니다. 그래서 같은 단어의 배열을 통해 매핑 할 수 있어요 :

Vue.component('comp-b', { 
    props: ['astore'], 
    template: '#comp-b', 
    data: function(){ 
    return { 
     words: store.state.words 
    } 
    }, 
    computed: { 
    theWords: function(){ 
     return this.words.map(function(word){ 
     return word 
     }) 
    } 
    } 
}) 

나는 단어 목록을 비우하는 방법을 알아내는 어려움을 겪고을 같은 그 (comp-b에 표시되는 내용이 갱신 Empty words 버튼을 클릭한다 http://codepen.io/p-adams/pen/oLpzPA

Answer 1

배열을 지우려면 당신이

를 사용할 수 있습니다 단어는 이제 단어 목록에서 삭제 되었기 때문에 여기

는 데모입니다) 아무 것도 없어야합니다

이 값을 기준으로 https://vuejs.org/guide/list.html#Mutation-Methods splice를 사용할 때 VueJS가 뷰 업데이트를 트리거합니다.