组件与 Vue.js 中的存储数据不匹配答案

【问题标题】：Component not matching Store data right in Vue.js组件与 Vue.js 中的存储数据不匹配
【发布时间】：2020-09-20 05:55:10
【问题描述】：

我有一个组件尝试将路由参数与存储中的对象数组匹配，以查看路由名称/变量是否在对象中，如果匹配则显示来自对象的数据。但是，无论如何，它总是返回 false。它是从外部 JS 文件中提取数据，所以这可能是通过引用传递而不是硬定义它吗？

这是我的商店

import Vue from "vue";
import Vuex from "vuex";
import { productList } from "../assets/db.js";

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    productList: productList
  },
  mutations: {},
  actions: {},
  modules: {}
});

export default store;

这是组件内部的函数

created: function() {
        for (let type in this.$store.state.productList) {
          console.log(type.includes(this.$route.params.ptype))
        }
}

路由是动态的，匹配ptype (this.$route.params.ptype)

但是它总是在控制台中返回 false。循环有问题吗？另外，如果有更好的方法来使用这样的路线显示数据，请告诉我！谢谢！

【问题讨论】：

输入你的代码console.log(this.$store.state.productList)，我想看看这个变量的内容。问题可能是这样的。
for..in 在数组上迭代索引，而不是值。你可能想要for..of。 db.js 的 productList 导出示例会很有帮助
同意@Phil，也许使用this.$store.state.productList.forEach(element => console.log(element)) 可以帮助访问该数组中的项目，而不仅仅是索引。请提供productList的值以便进一步了解。

标签： javascript vue.js vue-component vuex vue-router

【解决方案1】：

我们这里缺少一些信息，productList 应该是一个对象数组？那么在你的循环中，type 将是一个整数？你确定它不是一个字符串吗？如果我误解了productList 只是一个对象，那么这意味着type 是一个字符串。现在，String.protoype.includes() 区分大小写，所以也许这是区分大小写的问题？如果不是，我会继续仔细检查你的数据的形状，也许你搞混了。

在您的 vue-router 配置中，有一个标志，您可以为每个路由设置标志 props，如果您将其设置为 true，则所有参数都将设置为道具，您可以使用 this.myProp 访问它们你的组件。您还可以传入一个将传入静态道具的对象。或者，您可以传递一个函数，该函数将您在组件中使用的路由对象作为参数，在将它们作为道具传递之前对其进行任何操作。

在vue-router 文档中了解更多信息

【讨论】：

如果productList 是一个数组，那么type 将是一个整数