vuejs에서 재사용 가능한 api-properties 구성 요소를 구현하는 방법?

vuejs에서 재사용 가능한 api-properties 구성 요소를 구현하는 방법?

나는 비슷한 방식으로 구문 분석된 컨텐츠를 제공하는 몇 개의 동일한 API가 있는 간단한 vuejs 앱을 개발하고 있다.다양한 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: ['[{', '}]']
})

지금 나는 이야기, 시, 그리고 다른 많은 것들을 위해 위의 대상을 복제했다.하지만 나는 이상적으로 그것들을 하나로 결합하고 싶다.내가 찾으려 했던 전략에는 부모 구성요소를 이 물건으로 하는 것이 포함되었지만, 나는 아마도 이 물건의 일부에 대해 잘못 생각하고 있는 것 같다.도움 정말 고마워!

나는 믹스인과 함께 갔다.이것이 내가 실행한 해결책이다.

apiObject.js(Reusable object)

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 파일에 템플릿을 만들 수 있으며, 이것이 바로 내가 한 작업이었습니다.

모든 js 파일이 포함된 output.properties

<div id="story">
    <story-component inline-template>
        [{loaded[current].title}]
    </story-component>
</div>

이를 해결하기 위한 여러 가지 방법이 있지만, 일단 구성요소/애플리케이션 상태 모델에서 이 정도의 복잡성에 도달하면, 가장 합리적인 전략은 중앙 저장소를 이용하는 것이다.

vue 가이드의 상태 관리 장과 우수한 vuex를 참조하십시오.

여기서 적절한 로컬 클래스/기능에 공통 논리를 적용하고 이를 스토어 작업에서 호출할 수 있다(비동기 작업의 경우 작업을 사용해야 하며, 비동기 작업이 완료되면 각 상태 변경과 함께 돌연변이를 커밋한다).

참조URL: https://stackoverflow.com/questions/50088813/how-to-implement-reusable-api-calling-component-in-vuejs