Javascript Vue.js（vuex）。重新加载页面时，Computed属性返回undefined。（vuex中对象数据的硬编码数组）

我正在用Vue构建一个鞋店，问题是当我试图通过Shoedeail组件上的computed属性访问getter时，在重新加载页面时，我没有定义。我正在vuex状态下存储一些硬编码的对象数组数据。在Shoe组件中，我正在使用v-for循环数据，并在Men视图中输出，这对我有效，所有可用的鞋都会显示出来。当用户单击鞋子图像时，会为每只鞋子加载一条新路线，其中包含被单击鞋子的更多详细信息。我正在使用id进行动态路由。现在我在vuex中有了一个getter

getProductById: (state) => (id) => {
      return state.sneakers.find((sneaker) => sneaker.productId === id);
    },

然后我通过计算属性访问它：

   product() {
      return this.$store.getters.getProductById(this.$route.params.id);
    },

这很好，我可以通过插入方式输出存储在vuex状态下的数据，如：

{{product.brand}}

重新加载页面时，出现以下错误：

**[Vue warn]: Error in render: "TypeError: Cannot read property 'brand' of undefined"
found in
---> <Detail> at src/components/ShoeDetail.vue
       <App> at src/App.vue
         <Root>**

---

在Shoedeail组件中执行此操作：

data: () => {
    data: '',
},
methods: {
    getProduct () {
    this.product = this.$store.getters.getProductById(this.$route.params.id);
    },
},
mounted () {
    this.getProduct();
}

---

它应该可以工作：）

谢谢你的回答，我可以通过在shoedeail的computed属性中添加parseInt来修复它

计算：{
产品（）{
返回此。$store.getters.getProductById(
parseInt（this.$route.params.id）
);
},
}

我会调试

产品

计算属性，查看它返回

未定义时发生了什么。此时，
this.$route.params.id
的值是多少？如果是字符串，则与数字进行比较将不匹配。谢谢您的回答！你完全正确，它是一个字符串，使用parseInt将其更改为数字！
data: () => {
    data: '',
},
methods: {
    getProduct () {
    this.product = this.$store.getters.getProductById(this.$route.params.id);
    },
},
mounted () {
    this.getProduct();
}