如何将组件用于具有不同数据加载路径的不同路径？

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
    }
  }
})