이 비즈니스 논리는 Vuex에 얼마나 속하는가?

이 비즈니스 논리는 Vuex에 얼마나 속하는가?

나는 API에서 제품을 꺼내서 페이지에 표시하는 간단한 앱을 가지고 있다.

라우터가 사용자를 특정 제품 페이지로 이동시킬 때 제품 검색 어레이뿐만 아니라 검색 결과도 사라지지 않도록 앱에 Vuex를 추가했다.

검색 자체는 다음 단계로 구성된다.

• 로드 스피너 표시(업데이트)store목적어)
• API에 액세스하기 위한 작업을 발송하다.
• 최신 정보를 제공하다store제품을 가지고 이의를 제기하다, 스피너
• 상품 리스트가 소진되었는지 여부를 결정하다
• 로드 스피너 숨기기

무슨 말인지 알겠지.

모든 변수가 Vuex에 저장되어 있기 때문에 모든 비즈니스 논리도 Vuex에 속해야 하는 것은 당연하지만, 실제로 그렇게 해야 하는가?

나는 특별히 다음과 같은 상점 파라메터에 접속하는 것에 대해 말하고 있다.productsExhausted(더 이상 표시할 제품이 없는 경우) 또는productPage(무한 스크롤러 모듈이 트리거될 때마다 증가함) 등

Vuex에는 얼마나 많은 논리와 어떤 종류의 논리가 있는가?얼마만큼 안 되는가?

나는 Vuex가 스토리지에만 사용된다고 생각했지만, 모든 데이터가 그곳에 있기 때문에 Vue 앱으로 모든 데이터를 다시 가져와서 다시 전송하는 것은 문제를 해결하는 너무 장황한 방법인 것 같다.

Vuex는 데이터를 공유할 수 있게 해준다!

앱의 상태와 관련된 모든 것은 매우 간단하다.

여러 구성 요소에서 사용할 수 있는 모든 데이터를 저장소에 추가해야 한다.

비즈니스 논리에 대해서는, 비록 공식 문서에서는 명확하지 않지만, 그것은 같은 원칙을 따라야 한다.

내가 의미하는 것은 여러 요소에서 사용할 수 있는 논리는 작용에 저장되어야 한다는 것이다.또한 비동기식 작업을 처리할 수 있다.이것을 알고 있으면, 데이터를 끌어들이는 당신의 코드는 반드시 vuex의 동작에 저장되어야 한다.

내 생각에 당신이 해야 할 일은 요청을 행동 안에 넣은 다음 변수의 상태를 변경하면 UI가 자동으로 변경사항을 반영할 것이다.

더구나 적용하기에 좋은 패턴은 대부분의 논리를 국가 논리로 전환하는 것이다.예를 들어, 점프하는 눈사람의 데모를 생각해보자.여기서 클릭 동작은 저장소에서 값을 업데이트하는 결과를 얻는다.흥미로운 부분은 한 부품이 시계 기능을 사용하여 매장이 변경될 때 알림을 받는다는 것이다.이러한 방법으로 우리는 논리적인 요소를 구성 요소 안에 두되, 저장소를 이벤트 방출기로 사용한다.

var store = new Vuex.Store({
    state: {
    isJumping: 0
  },
  mutations: {
    jump: function(state){
      state.isJumping++;
    }
  }
})


Vue.component('snowman', {
  template: '<div id="snowman" :class="color">⛄</div>',
  computed: {
    isJumping: function(){
      return this.$store.state.isJumping;
    }
  },
  watch: {
    isJumping: function(){
      var tl = new TimelineMax();
      tl.set(this.$el,{'top':'100px'})
      tl.to(this.$el, 0.2, {'top':'50px'});
      tl.to(this.$el, 0.5, {'top':'100px', ease: Bounce.easeOut});
    }
  }
})

참조URL: https://stackoverflow.com/questions/49040922/how-much-of-this-business-logic-belongs-in-vuex