Как использовать компонент для разных путей с разными данными, загруженными для этого компонента? - PullRequest
Новая
       7

Как использовать компонент для разных путей с разными данными, загруженными для этого компонента?

0 голосов
/ 16 сентября 2018

У меня есть компонент. 

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