将 UI 元素与 Vuex 存储绑定

Question

我正在尝试将 UI 元素（单行文本框或 'input' 元素）与 Vuex 存储绑定。 This fiddle has the code.

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

理想情况下，我想将文本框与存储区中而非的变量绑定，同时添加一些代码来观察存储区的变化，以便对该商店反映在 UI.

我阅读了 Vuex 的 forms handling documentation 但不是很清楚完成这项工作的最佳方法。请问有人能帮忙吗？我是 SPA 的新手，所以我确信有更好的方法来完成这项工作。

Answer 1

我认为如果您想在 input 中使用存储变量，您使用的方法是通用方法。假设您想将 UI 变量与模型的状态分离（为什么？），您可以执行以下操作：

在该 vue 实例中有一个局部变量
在 v-model 中使用该局部变量
监视状态变量，如果状态变量发生变化，则更改局部变量。
在按下按钮时设置状态变量，或者像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
       }
    }
})

查看更新 fiddle here。

将 UI 元素与 Vuex 存储绑定

Binding a UI element with a Vuex store

javascript

vue.js

vuejs2

vuex