Как показать активное состояние при наведении / фокусировке в двух элементах одновременно в Vue .js / Vuex

Question

Это проблема Vue. js и Vuex .

Я создаю приложение, в котором я показываю список мест проживания ( ul -> li -> a) в то же время показывая положение этих иллюстраций на иллюстрации, решается с помощью SVG (активными элементами являются path и polygon). Если бы это был только один элемент, который я мог бы отображать в активном состоянии, используя только css, но из-за наличия двух активных элементов одновременно мне нужно событие.

Ранее я решил проблему, предоставив место жительства , хранится в Vuex, значение hasFocus: false , которое я бы изменил на true при наведении / фокусировке мыши и обратно на false при наведении / фокусировке. С этим я могу добавить / удалить класс has-focus , к которому я добавляю активное состояние css. Теперь я переделал хранилище данных, чтобы использовать Vuex ORM , после чего я вижу худшее снижение частоты кадров при определении мутации.

Есть ли лучший способ сделать это, чем использовать значение в объектной модели Vuex (ORM)?

Некоторые коды:

В Vuex:

residences: [
{
  id: 1,
  hasFocus: false,
  […] // Other values, not relevant to this question
},
{
  id: 2,
  hasFocus: false
},
…
…
],

В ResidenceItem. vue:

<router-link
  […]
  v-bind:class="{
    'has-focus': residence.hasFocus === true,
  }"
  @mouseenter.native.stop="toggleFocus(true)"
  @mouseout.native.stop="toggleFocus(false)"
  @focus.native.stop="toggleFocus(true)"
  @focusout.native.stop="toggleFocus(false)"
  […]
>
// Content
</router-link>
[…]

props: {
  id: {
    required: true,
  },
},


methods: {
  toggleFocus(focus) {
    Residence.update({
      where: this.id,
      data: {
        hasFocus: focus,
      },
    });
  },
},