組件不匹配 在 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文檔的內容