Блог

Главная - Вопросы по программированию - Как преобразовать api опций в api композиции в Vue.js?

Как преобразовать api опций в api композиции в Vue.js?

#javascript #vue.js #vue-composition-api

Вопрос:

Я использую Vue.js версия 3. Вот мой полный код с фиктивными данными и API опций с фильтрами и сортировкой, и все работает очень хорошо

 <template>
  <h5>List of Products</h5>

        <h3>Filter</h3> 
        <button v-on:click="resetOptions">Reset</button>
        <button v-on:click="sorting">Sorting</button>
        <button v-on:click="sorting2">Sorting2</button>
        <select v-model="category">
            <option value="Accessories">Accessories</option>
            <option value="Laptop">Laptop</option>
            <option value="Stationary">Stationary</option>
        </select> 
        <div>
        <input type="checkbox" name="test" id="test" v-model="city"  value='Roma' /> 
        <label for="test"> Roma</label>
        <input type="checkbox" name="test2" id="test2" v-model.trim="city" value='Barselona'  />
        <label for="test2"> Barselona</label>
        <input type="checkbox" name="test3" id="test3" v-model.trim="city" value='Milano'  />
        <label for="test3"> Milano</label>
        </div>
         <!-- <select v-model="city">
            <option value="Barselona">Barselona</option>
            <option value="Roma"> Roma </option>
            <option value="Milano">Milano</option>
        </select>  -->

        <input type="text" v-model="name" placeholder="Filter By Name"/>

        <label for="vol">Price (between 0 and 1000):</label>
    
        <input type="range" v-model.trim="range" min="0" max="1000" step="10"/>  
        <ul>
            <li v-for="product in filterProducts" :key="product.name"> Product Name : {{product.name}} - Price : {{product.price}} ({{product.category}}) 
                {{product.city}}
            </li>
        </ul>
</template>

<script>
import getPosts from '../composables/getPosts'
export default {
 data: ()=> ( {

            city:['Roma', 'Barselona', 'Milano'],
            category: '',
            name: '',
            range: '10000',
            products: [
                { name: "Keyboard", price: 44, category: 'Accessories', city:'Roma'},
                { name: "Mouse", price: 20, category: 'Accessories', city:'Barselona'},
                { name: "Monitor", price: 399, category: 'Accessories', city:'Roma'},
                { name: "Dell XPS", price: 599, category: 'Laptop', city:'Roma'},
                { name: "MacBook Pro", price: 899, category: 'Laptop', city:'Roma'},
                { name: "Pencil Box", price: 6, category: 'Stationary', city:'Barselona'},
                { name: "Pen", price: 2, category: 'Stationary', city:'Milano'},
                { name: "USB Cable", price: 7, category: 'Accessories', city:'Milano'},
                { name: "Eraser", price: 2, category: 'Stationary', city:'Roma'},
                { name: "Highlighter", price: 5, category: 'Stationary', city:'Roma'}
            ]

        }),

              computed: {
            filterProducts: function(){
                return 
 this.filterProductsByName(this.filterProductsByRange(this.filterProductsByCity(this.filterProductsByCateg 
 ory(this.products))))
            },

        },
        
        methods: {

            filterProductsByCategory: function(products){
                return products.filter(product => !product.category.indexOf(this.category))
            },

            filterProductsByName: function(products) {
                return products.filter(product => 
  !product.name.toLowerCase().indexOf(this.name.toLowerCase()))
            },

            filterProductsByCity: function(products) {
                     return products.filter(product => this.city.indexOf(product.city) !== -1)
            },

             filterProductsByCity2: function(products) {
                 return products.filter(product => !product.city.indexOf(this.city))
             },

            filterProductsByRange: function(products){
                return products.filter(product => (product.price >= 0 amp;amp; product.price <= this.range) ? product : '')
            },

            sorting:function(){
                this.products.sort((a,b)=>(a.price > b.price) ? 1 : -1)
            },
             sorting2:function(){
                this.products.sort((a,b)=>(a.price < b.price) ? 1 : -1)
            },

            uniqueCheck(e){
            this.city = [];
            if (e.target.checked) {
                 this.city.push(e.target.value);
               }
         },

            resetOptions:function(){
                this.category='',
                this.city='',
                this.name='',
                this.range='1000'
            },
        },

}
</script>

<style>

</style>

Но я хочу преобразовать это в API композиции, и я помещаю фиктивные данные в поддельный API. Я сделал этот вызов API и поместил его в getProducts.js файл. Этот файл я импортировал на этой странице, где я хочу показать эти данные. И это прекрасно работает. Но у меня есть проблема с преобразованием функций из API опций в API композиции
Вот мой код

 <template>
  <div class='home'>
      <h1>Third</h1>
        <select v-model="category">
            <option value="Accessories">Accessories</option>
            <option value="Laptop">Laptop</option>
            <option value="Stationary">Stationary</option>
        </select> 
      <div>
        <input type="checkbox" name="test" id="test" v-model="city"  value='Roma' /> 
        <label for="test"> Roma</label>
      </div>
      <div v-if="error"> {{error}} </div>
      <div v-if="products.length">
          <div v-for="product in filterProducts" :key='product.price'>
            <h3>{{product.name }}</h3>
            <h4>{{product.category}}</h4>
          </div>
      </div>
    <div v-else> Loading...</div>
  </div>
</template>


<script>
import { computed, ref} from 'vue'
import getProducts from '../composables/getProducts'

export default {
    components: {} ,
    setup(){ 

      const category = ref('')
      const city = ref('')
      const{products,error,load} = getProducts()

      load()

        function filterProductsByCategory (products){
              return products.filter(product => !product.category.indexOf(category.value))
          }
         function filterProductsByCity (products) {
               return products.filter(product => city.value.indexOf(product.city) !== -1)
            }

       const filterProducts = computed (()=> {  
        return filterProductsByCity.value(filterProductsByCategory.value(products.value))**
    }) 


      return {products, error, category, city, filterProducts, filterProductsByCity, filterProductsByCategory}
    }
}
</script>

<style>

</style>

Это часть моих функций фильтра, я думаю, что это проблема в функциях. Я изменил все, что мне нужно было для преобразования API опций в API композиции

Итак, это всего лишь часть логики фильтра, но если кто-то поможет мне в этом, я легко конвертирую весь код

Ответ №1:

data

  1. Замените каждое свойство данных на ref . Мы обновим их ссылки внутри setup() при конвертации methods позже.
  2. Используется onMounted для вызова load() при монтаже компонента.
 import { ref, onMounted } from 'vue'
import getProducts from '@/composables/getProducts'

export default {
  setup() {
    const { products, load } = getProducts()
    const category = ref('')
    const city = ref([])
    const name = ref('')
    const range = ref('10000')

    onMounted(() => load()) // load products

    return {
      // properties that the template needs should be returned here
      products,
      category,
      city,
      name,
      range,
    }
  }
}

methods

  1. Объявите методы как экземпляры функций внутри setup() .
  2. Для всех свойств данных, которые теперь ref являются s, обновите ссылки на их код , чтобы развернуть ref (т. Е. this.name Должно быть name.value и т. Д.).
 export default {
  setup() {
    //...
    const filterProductsByCategory = (products) => {
      return category.value
        ? products.filter((product) => !product.category.indexOf(category.value))
        : products
    }

    const filterProductsByName = (products) => {
      return name.value
        ? products.filter((product) => !product.name.toLowerCase().indexOf(name.value.toLowerCase()))
        : products
    }

    const filterProductsByCity = (products) => {
      return city.value amp;amp; city.value.length
        ? products.filter((product) => city.value.indexOf(product.city) !== -1)
        : products
    }

    const filterProductsByRange = (products) => {
      return range.value
        ? products.filter((product) => product.price >= 0 amp;amp; product.price <= range.value)
        : products
    }

    const sorting = () => products.value.sort((a, b) => (a.price > b.price ? 1 : -1))
    const sorting2 = () => products.value.sort((a, b) => (a.price < b.price ? 1 : -1))

    const uniqueCheck = (e) => {
      city.value = []
      if (e.target.checked) {
        city.value.push(e.target.value)
      }
    }

    const resetOptions = () => {
      category.value = ''
      city.value = ''
      name.value = ''
      range.value = '1000'
    }

    return {
      //...

      // methods that the template needs should be returned here
      sorting,
      sorting2,
      uniqueCheck,
      resetOptions,
    }
  }
}

computed

  1. Используется computed для создания вычисляемого свойства, ссылающегося на экземпляры функций и ref созданные выше в setup() .
 import { computed } from 'vue'

export default {
  setup() {
    //...
    const filterProducts = computed(() => {
      return filterProductsByName(
        filterProductsByRange(
          filterProductsByCity(filterProductsByCategory(products.value))
        )
      )
    })

    return {
      //...
      filterProducts,
    }
  }
}

ДЕМОНСТРАЦИЯ

Метки: