vue.js - Vue : computed vs data(),用于vuex绑定(bind)？

(注意:我不是在问如何使用watch)。

我有此表单模板，并希望将其绑定(bind)到Vuex商店中跟踪的某些变量，例如objectvalue3(注意:一页上可能存在不同的表单，因此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特有的吗？

最佳答案

尝试以下方法:

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

然后:

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

这应该起作用，因为数据的tracker对象指向存储中的那个，然后只要那里的值更改，它的tracker对象中的值也会更改。
computed之所以起作用，是因为它监听其中使用的变量的变化，而数据则不这样做，因为它在执行时会应用第一个值，并且不会跟踪更改。

关于vue.js - Vue : computed vs data(),用于vuex绑定(bind)？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50239661/