VueJS： v-model on <span> element ？如何处理？

Question

>我有一个简单的组件显示用户信息：

<div class="m-card-user__details">
<span class="m-card-user__name m--font-weight-500">
{{ firstname }} {{ lastname }}
</span>
<a class="m-card-user__email m--font-weight-300 m-link">
{{ loginEmail }}
</a>
</div>

脚本

<script>
export default {
data () {
return {
loginEmail : this.$store.getters.user.loginEmail,
firstname: this.$store.getters.user.firstName,
lastname: this.$store.getters.user.lastName,
}
}
};
</script>

问题是，如果另一个组件更改了 VueX 存储中 firstname 属性的值，我看到该值在存储上更新得很好，但在我的组件上没有更新。

如何在元素上设置绑定的 2 种方式？

Answer 1

将存储变量直接附加到data()将破坏 2 向绑定。

为此使用计算属性，例如：

computed: { 
loginEmail() { 
return this.$store.getters.user.loginEmail;
}
} 

然后像往常一样使用span上的计算，就像{{ loginEmail }}一样。

---

改进：如果需要，可以返回整个...getters.user(作为对象)computed，例如：

computed: { 
user() { 
return this.$store.getters.user;
}
} 

然后在您的跨度上使用它，例如{{ user.loginEmail }}等等。

这将为您节省一些行，提高可读性，并可能提高一点性能。

Answer 2

您也可以在模板中直接使用$store。

<div class="m-card-user__details">
<span class="m-card-user__name m--font-weight-500">
{{ $store.getters.user.firstName }} {{ $store.getters.user.lastName }}
</span>
<a class="m-card-user__email m--font-weight-300 m-link">
{{ $store.getters.user.loginEmail }}
</a>
</div>

我还没有尝试过这是否适用于 getter，但我看不出它为什么不这样做。现在你可以说这是一个反模式，但我更喜欢它，而不是仅仅为此目的使用计算属性。

另请参阅 https://github.com/vuejs/vuex/issues/306。

编辑：因为您提到了 2 路绑定：您不应该这样做来更新$store，而是使用操作和突变。在这种情况下，这很好，因为它本质上是一个单向绑定，其中状态流向<span>的内部 HTML。