vue.js - 如何将一个组件用于不同的路径，并为此组件加载不同的数据？

Question

我有一个组件。

<template>
      <HotTable :settings="hotSettings" ></HotTable>
</template>

<script>
import HotTable from "@handsontable/vue";
import Handsontable from "handsontable";

export default {
  data() {
    return {
        hotSettings: {
          data: 
          [
            ["", "Ford", "Volvo", "Toyota", "Honda"],
            ["2016", "10", 11, 12, 13],
            ["2017", 20, 11, 14, 13],
            ["2018", 30, 15, 12, 13]
          ],
          rowHeaders: true,
          colHeaders: true
        }
    };
  },
  components: {
    HotTable
  }
};
</script>

该组件以三种不同的方式显示：/path/path1、/path/path2、/path/path3。我怎样才能做到这一点，当导航这些路径时，这个组件显示在每个页面上，但它的数据（data字段）会不同？

最近建议props在路线中使用。

我的组件

<template>
  <HotTable :data="myData"></HotTable>
</template>

<script>
import HotTable from "@handsontable/vue";
import Handsontable from "handsontable";

export default {
  data: function() {
    return {}
    };
  },
  props: ["myData"],
  components: {
    HotTable
  }
};
</script>

<style src="handsontable/dist/handsontable.full.css"></style>
<style>
#hot-preview {
  width: 600px;
  height: 400px;
  overflow: hidden;
}
</style>

路由文件

export default new Router({
  routes: [{
      path: '/tables/groups',
      component: Table,
      props: {
        myData: [
          ["", "Ford", "Volvo", "Toyota", "Honda"],
          ["2016", 10, 11, 12, 13],
          ["2017", 20, 11, 14, 14],
          ["2018", 30, 15, 12, 15]
        ]
      },
    },
    {
      path: '/tables/subjects',
      component: Table,
      props: {
        myData: [
          ["", "Ford", "Volvo", "Toyota", "Honda"],
          ["2016", 10, 11, 12, 15],
          ["2017", 20, 11, 14, 14],
          ["2018", 30, 15, 12, 13]
        ]
      },
    },
  ],
})

该解决方案有效，但我需要动态获取表的数据，因此我使用的是商店。如何将商店与此构造相关联？

文件store.js

export const store = new Vuex.Store({
  state: {
    groupsTableData: [],
  },
  actions: {
    loadGroupsTableData({commit}) {
      axios
        .get("/api/tables/groups")
        .then((response) => {
          commit("SET_GROUPS_TABLE_DATA", response.data);
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  mutations: {
    SET_GROUPS_TABLE_DATA(state, data) {
      state.groupsTableData = data;
    },
  },
  getters: {
    groupsTableData: state => {
      return state.groupsTableData
    }
  }
})

标签： vue.jsvuexvue-router