javascript - 在 Vue.js 中实现商店模式

Question

我正在尝试在 Vue.js 中实现商店模式，但我陷入了困境。我有两个子组件，它们通过 Prop 将共享状态传递给它们。每个子组件都会根据传入的 props 执行不同的操作。 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

要清除数组，您可以使用

明确:函数(){
返回 this.state.words.splice(0);
}

基于此https://vuejs.org/guide/list.html#Mutation-Methods VueJS使用splice时触发 View 更新。