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属性的值，我会发现该值在商店中得到了很好的更新，但是在这里我的组件上却没有。

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

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>

我还没有尝试过这种方法是否适用于吸气剂，但是我不知道为什么不行。现在您可能会争辩说这是一种反模式，但是我宁愿选择它而不是仅具有用于此目的的计算属性。

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

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

VueJS：<span>元素上的v模型？如何处理？

2 个答案: