Vue：计算与数据（），用于 vuex 绑定？

Question

（注意：我不是在问如何使用watch）。

我有这个表单模板，想将它绑定到一些变量，例如 objectvalue3，这些变量在 Vuex 商店中被跟踪（注意：不同的表单可能出现在一个页面上，所以 props.formname 告诉表单在哪里看）。

<template>
    <div>
    Tracking formname_:{{formname_}}:
        <form method="post" autocomplete="off">
            <input type="text" name="objectvalue3" :value="objectvalue3" />
            <input type="submit" class="btn btn-primary btn-success" value="Track" @click.prevent="write">        
        </form>
    </div>
</template>
....
props: {
    formname: {
        type: String,
        default: "main"
    }
},

在data 中跟踪它不起作用 - 即表单没有更新 - 它只是保留 vuex 初始化为的值：

data: function() {
    return {
        formname_: this.formname
        ,objectvalue3: this.$store.state.tracker[this.formname].objectvalue3
},

但是使用computed 可以。

computed: {
    objectvalue3: function() {
        return this.$store.state.tracker[this.formname].objectvalue3
    }

我知道当我需要进行计算时必须使用computed。但是这里没有真正的计算。除非，它可能是通过this.formname 的哈希查找告诉要查看哪个tracker 属性的表单导致直接data 失败？这是 vuex 特有的吗？

Answer 1

试试这个：

data: function() {
    return {
        formname_: this.formname,
        tracker: this.$store.state.tracker[this.formname]
},

然后：

<input type="text" name="objectvalue3" :value="tracker.objectvalue3" />

这应该可以工作，因为数据的 tracker 对象指向存储中的那个，那么每当那里的值发生变化时，tracker 对象中的值也会发生变化。

computed 起作用是因为它监听其中使用的变量的变化，而 data 不起作用，因为它在执行时应用第一个值并且不跟踪变化。