#vue.js #webpack
#vue.js #webpack
Вопрос:
В настоящее время у меня есть файл, в котором я делаю рендеринг материала условно на основе параметров маршрута. Я намерен иметь 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>
Ответ №1:
Для этого вы могли бы использовать 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>