Блог

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

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

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

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

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

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

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

Пример микширования: [Зеркало CodePen]

 /* 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>