Vuex：如何将变量传递给 getter？

Question

在 vue 应用程序中，我从 URL 得到一个 elementId 以传递给 vuex getter:

<template>
  <p>elementId: {{ elementId }}</p>
  <p>loadedElement: {{ loadedElement }}</p>
</template>

<script>
export default {
  data() {
    return {
      elementId: this.$route.params.id,
    };
  },
  computed: {
    loadedElement() {
      return this.$store.getters.getElementById(this.elementId);
    },
  },
};
</script>

Getter:

getElementById: (state) => (id) => {
  return state.elements.find(ele => ele.id === id)
},

现在页面呈现如下：

但是，当对 elementId 进行硬编码时，它会起作用：

<template>
  <p>elementId: {{ elementId }}</p>
  <p>loadedElement: {{ loadedElement }}</p>
</template>

<script>
export default {
  data() {
    return {
      elementId: 3,
    };
  },
  computed: {
    loadedElement() {
      return this.$store.getters.getElementById(this.elementId);
    },
  },
};
</script>

我不明白我做错了什么，因为从路由中获取 elementId 似乎有效，但它没有传递到 getter 函数中。

我做错了什么？

Answer 1

很可能 this.$route.params.elementId 是一个字符串，但您的元素 ID 是数字。使用 === 比较字符串和数字将不匹配。

尝试使用 ==，或将 this.$route.params.elementId 转换为数字：

data() {
  return {
    elementId: +this.$route.params.id,
  };
},

（当然，也许你想做更多的错误检查作为其中的一部分。）

Vuex：如何将变量传递给 getter？

Vuex: How can I pass a variable to a getter?

getter

vue.js

vuex