Vue 구성 요소 통신 솔루션

데이터 통신
우선, 우리는 통상적으로 데이터 전달, 구성 요소 통신 따위를 말하는데 나는 두 가지 장면으로 나눌 수 있다고 생각한다.

페이지와 페이지 사이

구성 요소와 구성 요소 간

통신 방안
어떤 장면이든 Vue를 사용할 때 우리는 다음과 같은 5가지 선택을 통해 데이터 통신을 실현한다.

vuex

storage

props

event

URL queryString

통신 시나리오 선택
우리가 통신 방안을 선택할 때, 예를 들어 목록 페이지가 어떻게 모든 항목의 id를 상세한 페이지에 전달하는지 확인할 때, 일반적으로 어떤 문제를 고려해야 합니까?당신은 직접 모든 세트가 vuex입니까, 아니면sessionStorage를 즐겨 사용합니까?
일반적으로 우리는 아래의 몇 가지 문제를 고려해야 한다.

페이지를 새로 고칠 수 있는지 여부

페이지를 공유할 수 있는지 여부(또는 URL이 RESTful을 요구하는지 여부)

데이터 업데이트 후 이 데이터를 사용하는 모든 구성 요소가 업데이트에 응답해야 하는지 여부

분석하다.
먼저'페이지와 페이지 사이의 통신 장면'을 말하고, 먼저 위의 5가지 방안을 우리가 선택할 수 있는 것은 다음과 같다.

vuex, storage, URL queryString.

그리고 각 방안이 위의 세 가지 문제에 대해 잘 해결되었는지 분석해 보자. 비고: 페이지 통신 장면에서 실시간 응답을 요구하지 않는다. 다음 페이지가 실시간 응답이라고 해도 보이지 않기 때문에 주로'리셋'과'공유'를 본다.
vuex: 리셋 불가,storage 공유불가:url 공유불가:리셋 가능,공유 가능
이렇게 보면 url query String의 방식은'페이지 통신 장면'에서 가장 좋은 선택이지만 나는 여전히 의심이 있다.

나는 처음부터 끝까지 정보를 뛰어넘어 사용자에게 폭로하는 것은 좋지 않다고 생각한다.(심리적 문제, 극복 가능)

url의 길이 제한;이것은 상관없다. 2k, 네가 아무리 전달해도 나는 네가 2k를 초과하는 상황이 나타날 것이라고 생각하지 않는다

url은 조립이 필요합니다. 이 조립은 번거롭습니까?귀찮지 않아요. 대상이 문자열을 돌릴 뿐이에요.

이렇게 하면 모든 페이지가 들어갈 때query String을 해석해야 한다. 이렇게 하면 번거로움이 증가하는 정도가 아닐까mixins를 통해 조작할 수 있다.믹스에 모이는 것도 많지는 않을 거예요.

그래서 우리는'urlquerystring'을'페이지와 페이지 통신 장면'의 통신 방안으로 선택할 수 있다.앞으로 너는 이렇게 쓸 수 있다.
예를 들어 목록 페이지를 상세 정보 페이지로 이동하려면 id를 가져가야 합니다

    this.$router.push({
        path: 'detail',
        query: {
            id
        }
    })

너의 URL은 항상 이렇게 생길 것이다.

https://abc.com/#/?id=123

비고: 만약 당신의 페이지를 새로 고치고 공유할 수 없다면 당신은 세 가지 방안을 마음대로 선택할 수 있습니다. 누구를 사랑하는지.
중점: URL query String 방식에서 해결할 수 없는 문제가 하나 있습니다.

        ,    queryString         ,      url    :
    order/?goods=xxx
            ,             ,     url       (            )
    address-edit/
             ,           
    order/

so, URL query String을 잃어버렸어요.
나의 현재 해결 방안: 다중 입구가 존재하는 이런 페이지를 대상으로 반드시 그 페이지에 들어가는 첫 번째 시간에query String을 저장해야 한다.그리고 다음과 같이 판단한다.

if (//    queryString) {
    // use queryString
} else {
    // use storage
}

그러나 이런 방식은 주소 편집 페이지에서 주문 페이지로 돌아갈 수 없다. 사용자가 이때 주문 페이지를 공유하면 공유된 물건이 틀릴 것이다.
이제'구성 요소와 구성 요소 간의 통신 장면'위의 5가지 방안을 살펴보겠습니다. vuex, 이벤트, props,storage를 선택할 수 있습니다.
먼저 리셋, 공유와 실시간 응답 vuex, 이벤트를 리셋할 수 없음, props는 리셋할 수 있음 공유storage를 공유할 수 없음 & 실시간.
설명: 왜 vuex가 여기에서 리셋을 할 수 없습니까? 사용한state의 값이 다른 페이지에서 설정된 것이지 init가 아닌 다른 페이지에서 설정된 것이기 때문에 리셋은 값을 잃어버립니다.왜 이벤트,props는 리셋을 방지하고 공유를 방지할 수 있습니까? 왜냐하면 이 두 가지 게임은 프로그램이 실행하면 효력이 발생하고 실시간으로 업데이트할 수 있기 때문입니다.storage가 저장할 때 사건이 하나 있었지만 너무 trick적이에요.
그래서 저희가 선택한 건 이벤트,props?
분석해 보세요.구성 요소 통신은 두 종류로 나눌 수 있는데, 부자, 동년배이다.
부자간은:부전자:props부전자:$emit(event)
이것이 바로'props down, 이벤트 up'이다.
그런데 사실 부전자:this.$refs.xxx 서브 상위:this.$parent.xxx
그리고: 사용자 정의 v-모델
그리고:props를 하나의 대상으로 만든다.
동년배 사이: 이벤트-bus.
그래서 이게 끝이야?아무것도 없어요?응, 이렇게.
사색

vuex의 응용 장면에 대한 고려는 모든 구성 요소가 아니라 루트 간의 데이터 전달은 vuex를 통해 해야 한다. 두 가지 방식이 동시에 존재할 때 vuex를 선택할 수 있는 유일한 이유는 하나이다:

why?

   vuex        ,            ,   .              . 

beforeunload 이벤트를 감청하여 캐시state를 한 다음onload 이벤트에서 복구하면 vuex의 잃어버린 값을 피할 수 있습니다.

전체 프로젝트의 통일을 추구할 필요가 없는 통신 방식이다. 이론적으로 공유를 갱신하는 것을 고려하지 않고 전체 프로젝트는 vuex를 사용하기 때문에 아무 일도 없을 것이다.

vuex는 상태 관리로 상수를 보존하는 곳이 아니다.