0

这是一个Vue.js和Vuex相关的问题。

我正在构建一个应用程序，其中显示住宅列表（ul -> li -> a），同时显示这些插图在插图中的位置，通过 SVG 解决（活动元素是路径和多边形）。如果它只是一个元素，我可以只使用 css 来显示活动状态，但是因为同时有两个活动元素，我需要一个事件。

以前我通过给存储在 Vuex 中的住所提供一个hasFocus: false值来解决这个问题，我会在 mouseenter/focus 时将其更改为true，在 mouseout/focusout 时将其更改为 false。有了它，我可以添加/删除我添加活动状态 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,
      },
    });
  },
},
4

1 回答 1

0

为什么要将“hasFocus”存储在 vuex 中？有必要吗？如果没有，你应该把它移到ResidenceItem.vue's data()。我认为这只是 vue 上的一个临时状态。

<router-link
  :class="{
    'has-focus': focused,
  }"
  @mouseenter.native.stop="focused = true"
  @mouseout.native.stop="focused = false"
  @focus.native.stop="focused = true"
  @focusout.native.stop="focused = false"
  […]
>
...

data() {
  return {
    focused: false,
  };
},
...

如果 vuex 中需要 hasFocus （我认为这是一个坏主意），你应该使用正常的 vuex 状态来存储focusedResidenceId: null。

如果您需要，我可以提供更详细的解释。如果你是这样，请告诉我。

于 2020-08-05T15:28:52.857 回答