组件不匹配 在 Vue.js 中正确存储数据

Question

我有一个组件尝试将路由参数与存储中的对象数组匹配，以查看路由名称/变量是否在 object 中，然后显示来自 object 的数据（如果匹配）。 但是，无论如何，它总是返回 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;

这是组件内部的 function

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

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

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

Answer 1

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

在您的 vue-router 配置中，有一个标志，您可以为每个路由props设置标志，如果将其设置为 true，则所有参数都将设置为 props，您可以使用组件内部的 this.myProp 访问它们。 您还可以传入 Object ，它将传入 static 道具。 或者，您可以传递一个 function，它采用您在组件中使用的路由 object 作为参数，在将它们作为道具传递之前用它做任何您想做的事情。

更多关于vue-router文档的内容