VueJS: v-модель на элементе <span>?Как справиться с этим?

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>

Проблема в том, что если другой компонент изменит значение свойства firstname в хранилище VueX, явидите, что значение хорошо обновляется в магазине, но не в моем компоненте здесь.

Как я могу установить 2-стороннюю привязку для элемента?

Answer 1

Присоединение переменной хранилища непосредственно к data() нарушит двустороннюю привязку.

Используйте для этого вычисляемое свойство, например:

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.

Редактировать: Поскольку вы упоминаете двустороннее связывание: вы не должны делать это для обновления $store, вместо этого используйте действия и мутации. В этом случае это нормально, так как это, по сути, односторонняя привязка, когда состояние перенаправляется на innerHTML ваших <span> s.