Как реализовать многоразовый API-вызов компонента в Vuejs? - PullRequest
Новая
       12

Как реализовать многоразовый API-вызов компонента в Vuejs?

0 голосов
/ 29 апреля 2018

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

Вот мой код 

var content = new Vue({
  el: '#story',
  data: {
    loaded: [],
    current: 0,
    hasMore:"",
    nextItems:"",
    errors: []
  },
  mounted() {
    axios.get("/storyjs")
    .then(response => {
      this.loaded = this.loaded.concat(response.data.content)
      this.hasMore = response.data.hasMore
      this.nextItems = response.data.nextItem
    }).catch(e => {
      this.errors.push(e)
    })
  },
  methods: {
    fetchNext: function() {
      axios.get(this.nextItems)
      .then(response => {
        this.loaded = this.loaded.concat(response.data.content)
        this.hasMore = response.data.hasMore
        this.nextItems = response.data.nextItem
        this.current+=1
      }).catch(e => {
        //TODO CLEAR errors before pushing
        this.errors.push(e)
      })
    },
    next: function() {
      if (this.current+1 < this.loaded.length) {
        this.current+=1
      } else {
        this.fetchNext()
      }
    },
    prev: function() {
      this.current = (this.current-1 >= 0) ? this.current-1 : 0
    }
  },
  delimiters: ['[{', '}]']
})

Прямо сейчас, я воспроизвел вышеупомянутый объект для историй, стихов и многих других вещей. Но в идеале я хотел бы объединить их в одну. Стратегии, которые я пытался найти, включали в себя наличие родительского компонента в качестве этого объекта, но я думаю, что, вероятно, неправильно думаю о некоторых из них. Очень ценю помощь!

Ответы [ 2 ]

0 голосов
/ 11 июля 2018

Я пошел с миксинами. Это решение, которое я реализовал.

apiObject.js (Многоразовый объект) 

var apiObject = {
    data: function() {
        return {
            loaded: [],
            current: 0,
            hasMore: "",
            nextItems: "",
            errors: []
        };
    },
    methods: {
        fetchContent: function(apiEndpoint) {
            axios
                .get(apiEndpoint)
                .then(response => {
                    this.loaded = this.loaded.concat(response.data.content);
                    this.hasMore = response.data.hasMore;
                    this.nextItems = response.data.nextItem;
                })
                .catch(e => {
                    this.errors.push(e);
                });
        },
        fetchNext: function() {
            axios
                .get(this.nextItems)
                .then(response => {
                    this.loaded = this.loaded.concat(response.data.content);
                    this.hasMore = response.data.hasMore;
                    this.nextItems = response.data.nextItem;
                    this.current += 1;
                })
                .catch(e => {
                    //TODO CLEAR errors before pushing
                    this.errors.push(e);
                });
        },
        next: function() {
            if (this.current + 1 < this.loaded.length) {
                this.current += 1;
            } else if (this.hasMore == true) {
                this.fetchNext();
            }
        },
        prev: function() {
            this.current = this.current - 1 >= 0 ? this.current - 1 : 0;
        }
    }
};

story.js (Специальное использование) 

var storyComponent = Vue.extend({
    mixins: [apiObject],
    created() {
        this.fetchContent("/story");
    }
});

new Vue({
    el: "#story",
    components: {
        "story-component": storyComponent
    },
    delimiters: ["[{", "}]"]
});

и затем вы можете либо определить шаблон в самом компоненте, либо использовать встроенный шаблон для создания шаблона в html-файле, что я и сделал

output.html со всеми включенными js-файлами 

<div id="story">
    <story-component inline-template>
        [{loaded[current].title}]
    </story-component>
</div>
0 голосов
/ 29 апреля 2018

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

См. Главу vue Управление государственным положением и, возможно, превосходную vuex .

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

...