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触发器视图更新。

在Vue.js中实现商店模式

1 个答案: