Как обмениваться «вычисленными» методами через приложение Vue.js - PullRequest
0 голосов
/ 19 сентября 2018

У меня есть приложение Vue.js, которое загружает список элементов, и каждый элемент передается как prop компоненту Vue.

Я понял, что с помощью mixins я могу поделитьсяобщие свойства компонентов, такие как computed, created и т. д.

Теперь я пытаюсь отсортировать список элементов и не могу понять, каким образом я получу доступ к вычисленным свойствам каждого компонента, чтобы применить сортировку/ фильтрации.Как мне это сделать?

Предметы

[{
  price: 10,
  qty: 2
}, {
  price: 8,
  qty: 3
}]

Mixin - ./Cost.js

export default {
  computed: {
     cost () {
        return this.price * this.qty;
     }
  }
}

Компонент (работает должным образом) - ./Product.vue

import Cost from './Cost.js'
export default {
   name: 'product-item',
   props: ['product'],
   mixins: [Cost]
}

Как бы вы получили доступ к вычисленным свойствам или реструктурировали эту настройку?

Компонент списка

<template>
  <div id="list">
     <div v-for="product in sorted" :product="product">Cost: {{ cost }} </div>
  </div>
</template>

<script>
import ProductItem from './Product.vue'
export default {
   components: { ProductItem },
   created: () {
      this.items = [...] // as noted above
   },
   computed: {
       sorted () {
           return this.items.sort( (a,b) => b.cost - a.cost); // cost is not accessible!
       }
   }
}
</script>

Ответы [ 2 ]

0 голосов
/ 19 сентября 2018

Используйте vuex.Ваш vuex store предоставит объект getters, который можно обернуть в нативные computed объекты нескольких компонентов или получить к нему прямой доступ.Ваш код будет СУХИМ, реактивным, кэшированным и обслуживаемым.

По моему опыту, когда вам нужно выйти за пределы child-parent отношений данных, vuex, store и shared state - это путьидти.Как только вы освоите его, совершенно волшебным образом будет развиваться ваше приложение.

Вопрос о том, как установить vuex, выходит за рамки вопроса.Посетите https://vuex.vuejs.org/guide/getters.html, чтобы увидеть, как геттеры похожи на вычисляемые свойства со значением совместного использования между компонентами.Официальное руководство Vuex также покажет, как инициализировать ваш экземпляр Vue с магазином.

Вот некоторые фрагменты, чтобы показать вам актеров в системе vuex.

Store and State

// state definition (basically a shared reactive 'data' object that lives outside components)
state:{
    message:'Hello'
}

// the store getters are declared as methods and accessed as properties (just like component/computed)
getters:{
    message: state => return state.message
}

Доступ из компонентов

// component 1 wraps getter
computed:{
    message(){
      return this.$store.getters.message
    }
}

// component 2 also wraps getter
computed:{
    message(){
      return this.$store.getters.message
    }
}
// templates can also use getters directly
<div>{{$store.getters.message}}</div>

// If message was wrapped, you can simply use the computed property
<div>{{message}}</div>

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

0 голосов
/ 19 сентября 2018

Как предлагает @Sphinx, вы можете использовать ref для доступа к дочернему компоненту.

Например:

<template>
  <div id="list">
     <product-item v-for="product in sorted" :product="product" :ref="product"></product-item>
  </div>
</template>
<script>
import ProductItem from './Product.vue'
export default {
   components: { ProductItem }, 
   data: () => ({
       hidrated: false,
       items: []
   })
   created() {
       this.items = [...] // as noted above
   },
   mounted() {
       this.hidrated = true
   },
   computed: {
       sorted () {
           if (!this.hidrated && !Object.keys(this.$refs).length) {
               // handle initial state, before rendered
               return this.items
           }
           return Object.values(this.$refs)[0]
               .sort((a,b) => b.cost - a.cost)
               .map(c => c.product)
       }
   }
}
</script>

Это предполагает, что у вас нет других refв вашем List Component.

Вы также должны проверить, отображается ли компонент первым, здесь я использую hidrated, чтобы отметить, когда компонент смонтирован.

...