用Vuex商店绑定UI元素

Question

我试图用Vuex商店绑定UI元素（单行文本框或“输入”元素）。 This fiddle has the code.

当SearchResult组件可见时，它会自动更新 - 请参阅下面的GIF，其中输入Lisp或Prolog。这不是我想要发生的事情。我真正想要做的是从模型状态中分离出 UI状态（即文本框的值），这样如果我键入Lisp并按搜索，SearchResult组件会自行更新。

理想情况下，我想文本框带有可变这是在店里不绑定，还添加一些代码来改变观察到店里，让店里的任何变化都反映在UI。

我读了Vuex的forms handling documentation，但对于完成这件事的最佳方式并不十分清楚。请任何人都可以帮忙？我是SPA新手，所以我确信有一个更好的方法来完成这项工作。

Answer 1

我认为你已经使用的方法是一般的方法，如果你想在input使用储存变量。 （为什么？）既然你要分离与模型的状态UI变量，你可以做到以下几点：

1. 有在VUE instace一个局部变量
2. 使用与V-模型局部变量
3. 在状态变量上放置一个监视，如果状态变量改变，则改变局部变量。按下按钮
4. 设置状态变量，或像onblur事件

这里一些其他的方式是相关的JS变化：

const app = new Vue({ 
    router, 
    el: '#app', 
    data: { 
     localQuery: '' 
    }, 
    computed: { 
     query: { 
      get() { return store.state.query }, 
      set (v) { store.commit('setquery', v) } 
     } 
    }, 
    methods: { 
     s1: function() { 
      console.log('app.s1 this.query: ' + this.query); 
      this.query = this.localQuery 
      router.push({ name: 'qpath', params: { query: this.query }}); 
     } 
    }, 
    watch:{ 
     query: function (newVal) { 
        this.localQuery = newVal 
     } 
    } 
}) 

看到更新的小提琴here。