在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 
     }) 
    } 
    } 
}) 

我有一些困難，搞清楚如何清空單詞列表，以便通過點擊Empty words按鈕，它更新了什麼是顯示在comp-b（其中應該是什麼的話，因爲現在已經從單詞列表中清除）

這裏是一個演示：http://codepen.io/p-adams/pen/oLpzPA

Answer 1

要清除的陣列可以使用

clear: function(){ return this.state.words.splice(0); }

基於此https://vuejs.org/guide/list.html#Mutation-Methods當使用拼接時，VueJS觸發視圖更新。