Разбить методы Vue на несколько файлов?

Question

В настоящее время у меня есть файл, в котором я выполняю рендеринг вещей, основываясь на параметрах маршрута. Я намерен иметь 9 различных параметров, которые отображают 9 различных наборов информации / функций.

На данный момент я внедрил только один из этих наборов функций в этот файл, и этот файл очень большой, в основном из-за разделов methods.

В Vue (с веб-пакетом), каков наилучший способ разбить один документ на несколько документов без необходимости выполнять тонну редактирования, чтобы сохранить функциональность.

Это текущая структура документа:

<template>
  <div class='container' v-if="id=='exampleparam'"></div>
  <!-- This is repeated 9 times, with forms etc. inside each div for functionality -->
</template>
exports default {
    data () {
        return {
           //data stuff
        }
    },
    methods: {
        //methods for feature 1

        //methods for feature 2

        //etc.....
    },

    created () {
        //Authentication stuff that i want to stay in this file

        switch(this.id){
            case 'exampleparam':
                this.getAllExampleParamData() //function to get information for this feature from database
                break

            //Repeat cases for each feature
        }
    }
}
//Styles for the page
<styles></styles>

Answer 1

Вы можете использовать mixins (на мой взгляд, простой вариант) или Vuex (требуется дополнительный пакет и немного больше настроек) для этого ..

С mixins вы можете использовать data свойства ( или любое другое свойство, computed, watch и т. Д. ), которые не существуют внутри самого миксина, но делаютсуществует в компоненте, в котором вы хотите использовать миксин (как показано в демонстрации ниже).Это позволяет миксинам быть очень гибкими, и означает, что вам не нужно реструктурировать много кода / и т.д. ...

Mixin (s) Пример: [ CodePen mirror]

/* FIRST FEATURE MIXIN */
const firstFeatureMixin = {
  methods: {
    // pretend there are more methods here
    firstFeatureFirstMethod() {
      this.fromFirstFeature = "I am from feature 1 mixin";
    }
  }
};

/* SECOND FEATURE MIXIN */
const secondFeatureMixin = {
  methods: {
    // pretend there are more methods here
    secondFeatureFirstMethod() {
      this.fromSecondFeature = "I am from feature 2 mixin";
    }
  }
};

/* MAIN VUE APP */
new Vue({
  el: "#app",
  mixins: [firstFeatureMixin, secondFeatureMixin],
  data: {
    fromFirstFeature: "",
    fromSecondFeature: ""
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="app">
  <div>
    <div>
      <div>
        <button @click="firstFeatureFirstMethod">Load from first feature file</button>
      </div>
      <div>
        {{ fromFirstFeature }}
      </div>
    </div>
    <div style="margin-top: 20px;">
      <div>
        <button @click="secondFeatureFirstMethod">Load from second feature file</button>
      </div>
      <div>
        {{ fromSecondFeature }}
      </div>
    </div>
  </div>
</div>