vue.js динамически импортирует компонент

Question

Я пытаюсь импортировать компонент динамически, но все мои переменные компонента и vuex кажутся неопределенными.

function loadChart(chartName){
    let chart = chartName + '.vue'
    return System.import('@/components/charts/' + chart)
  }

  export default {
    name: "SingleChart",
    data() {
      return {
        chartTitle: this.$store.getters.getSingleChartTitle,
        chartName: this.$store.getters.getSingleChartName
      }
    },
    methods: {},
    computed: {},
    watch: {},
    props: [],
    components: {
        Chart: () => loadChart(this.chartName)
    }
  }

Я получаю ошибку

Reason: Error: Cannot find module './undefined.vue'.

Answer 1

Исходя из страницы состояния Vuex , вы, возможно, не вводили хранилище, чтобы использовать его, как вы указали (this. $ Store ...)

Vuexпредоставляет механизм «внедрения» хранилища во все дочерние компоненты из корневого компонента с параметром хранилища (включается Vue.use (Vuex)):

const app = new Vue({
    el: '#app',
    // provide the store using the "store" option.
    // this will inject the store instance to all child components.
    store,
    components: { Counter },
    template: `
      <div class="app">
        <counter></counter>
      </div>
})