Вытягивание нескольких статических свойств в Vue.js

Question

Я очень новичок в Vue.js, и мы работаем над добавлением Vue.js в существующий проект по частям.Я работаю над переписыванием слайдера продукта в Vue.В настоящее время используется слайдер jquery Slick.Таким образом, в текущем / старом коде в html эта функция js вызывается:

function productDetailsRecommendations(compositeNumbers) {
  var params = {
    compositeNumbers: compositeNumbers,
    strategy: 'pp12',
    backupStrategy: 'popular',
    divId: 'recommendedProductsHorizontal',
    isVertical: false,
    isHideHeaderText: false,
    headerText: 'Guests Who Viewed This Item Also Viewed These',
    backupHeaderText: 'Popular Products',
    itemsPerPage: 5,
    itemDisplayLimit: 10,
    numberOfItems: 15,
    responseMap: null
  };

  createSlider(params);
}

Теперь я использую vue-carousel для воссоздания слайдера.Поэтому я заменил этот вызов своей собственной скопированной функцией: productDetailsRecommendationsVue.

Теперь я создал ProductRecommendationsSlider.vue в качестве компонента слайдера.И у меня есть index.js в качестве точки входа, где ползунок инициализируется.

Теперь мой босс сказал мне, что мне нужно поместить функцию productDetailsRecommendationsVue в index.js.

// index.js

import Vue from 'vue';
import axios from 'axios';
import VueCarousel from 'vue-carousel';
import Slider from '/components/slider/ProductRecommendationsSlider'

Vue.use(VueCarousel);

window.productDetailsRecommendationsVue=function(compositeNumbers) {
  var params = {
    compositeNumbers: compositeNumbers,
    strategy: 'pp12',
    backupStrategy: 'popular',
    divId: 'recommendedProductsHorizontal',
    isVertical: false,
    isHideHeaderText: false,
    headerText: 'Guests Who Viewed This Item Also Viewed These',
    backupHeaderText: 'Popular Products',
    itemsPerPage: 5,
    itemDisplayLimit: 10,
    numberOfItems: 15,
    responseMap: null
  };

};

/* eslint-disable no-new */
new Vue({
  el: '#itemDetailPage #recommendedProductsHorizontal .imageSlider',
  components: {
    Slider,
    'carousel': VueCarousel.Carousel,
    'slide': VueCarousel.Slide
  },
  template: '<product-slider></product-slider>'
});

Но мой главный вопрос - как мне передать эти параметры в компонент?

Они необходимы в одной из функций в ProductRecommendationsSlider.vue.Мой босс сказал, что я на правильном пути, поместив функцию js в index.js.Все учебники, которые я нашел в Интернете, рассказывают о создании проекта с нуля.Ввязать Vue в существующий проект намного сложнее IMO.

Answer 1

Поскольку вы используете отдельные файловые компоненты (*.vue в рамках проекта, сгенерированного в Vue CLI), ваш проект уже имеет поддержку модульности, поэтому вам не нужно прикреплять свойства / функции к window объект.Вместо этого вы можете инкапсулировать свои статические свойства / функции в сам файл компонента:

// ProductRecommendationsSlider.vue
<script>
function productDetailsRecommendations() {
  return { /*...*/ }
}

export default {
  data() {
    params: {}
  },
  methods: {
    loadParams() {
      this.params = productDetailsRecommendations();
    }
  }
}
</script>

или в отдельные файлы, которые вы можете импортировать в ваш компонент:

// ProductRecommendationsSlider.vue
<script>
import { productDetailsRecommendations } from '@/utils';

export default {
  data() {
    params: {}
  },
  methods: {
    loadParams() {
      this.params = productDetailsRecommendations();
    }
  }
}
</script>

// <root>/src/utils.js
export function productDetailsRecommendations() {
  return { /*...*/ }
}

Затем вы можетесвяжите эти параметры с вашими vue-carousel свойствами.Обратите внимание, что только некоторые параметры в вашем примере поддерживаются vue-carousel (неподдерживаемые помечены n/a):

"strategy": "pp12",                           // n/a
"backupStrategy": "popular",                  // n/a
"divId": "recommendedProductsHorizontal",     // ID of container div
"isVertical": false,                          // n/a
"isHideHeaderText": false,                    // true = hide `headerText` h3; false = show it
"headerText": "Guests Who Viewed This Item Also Viewed These",  // h3 text content (isHideHeaderText: true)
"backupHeaderText": "Popular Products",       // h3 text content (isHideHeaderText: false)
"itemsPerPage": 5,                            // vue-carousel perPage
"itemDisplayLimit": 10,                       // n/a
"numberOfItems": 15,                          // vue-carousel item count
"responseMap": null                           // n/a

Пример привязки данных:

<code><template>
  <div class="product-slider" :id="params.recommendedProductsHorizontal">
    <h3 v-if="!params.isHideHeaderText">{{params.headerText}}</h3>
    <carousel :perPage="params.itemsPerPage">
      <slide v-for="i in params.numberOfItems" :key="i">
        <span class="label">{{i}}</span>
      </slide>
    </carousel>
    <section>
      <button @click="loadParams">Load params</button>
      <pre>params: {{params}}

демо

Answer 2

Вы можете назначить window.productDetailsRecommendationVue в данных vue или вычисляемых свойствах

1) Измените window.productDetailsRecommendationsVue из функции на

window.productDetailsRecommendationsVue = {
   //compositeNumbers: "I have no idea where this comes from but it could be passed separately",
    strategy: "pp12",
    backupStrategy: "popular",
   divId: "recommendedProductsHorizontal",
   isVertical: false,
    isHideHeaderText: false,
    headerText: "Guests Who Viewed This Item Also Viewed These",
    backupHeaderText: "Popular Products",
    itemsPerPage: 5,
    itemDisplayLimit: 10,
    numberOfItems: 15,
    responseMap: null
};

2) внутри экземпляра vue индекса.js присваивает window.productDetailsRecommendtionsVue свойству данных:

new Vue({
  el: '#itemDetailPage #recommendedProductsHorizontal .imageSlider',
  components: {
    Slider,
    'carousel': VueCarousel.Carousel,
    'slide': VueCarousel.Slide
  },
  data: {
    oldSliderData: window.productDetailsRecommendationsVue
  }
  template: '<product-slider></product-slider>'
});

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