vue/vuex 반응도 제한

vue/vuex 반응도 제한

우리가 어떤 종류의 물체를 가지고 있고, 이 물체들은 절대 변하지 않는다고 가정해 봅시다.예를 들어, 구글 지도에서 받은 검색 결과일 수 있다. api - 모든 결과는 ID, 제목, 주소, 좌표, 사진, 그리고 많은 다른 속성들과 방법들로 다소 복잡한 것이다.

우리는 vue/vuex를 사용하여 지도에 검색 결과를 표시하기를 원한다.만약 새로운 결과가 가게로 밀린다면, 우리는 그들의 마커를 지도에 그리고 싶다.어떤 결과가 삭제되면 우리는 그것의 마커를 제거하기를 원한다.그러나 내면적으로는 모든 결과가 결코 변하지 않는다.

vue에게 어레이(푸시, 스플라이스 등)를 추적하되, 더 깊이 들어가지 말고 요소의 속성을 추적하지 말라고 하는 방법이 있는가?

현재로서는 일부 보기 흉한 데이터만 분할될 수 있다. 즉, ID 배열을 vue에 보관하고 저장소 외부에 캐시 바이 아이드를 별도로 두십시오.나는 좀 더 우아한 해결책을 찾고 있다(예: knockout.js 관찰 가능한 Array.

사용할 수 있다Object.freeze()그 물건들에 대해서 말이야이것은 (정말 아주 작은) 성능 적중과 함께 나오지만, 만약 한번에 수백, 수천 개의 물체를 추가하지 않는다면 무시해도 될 것이다.

편집: 또는 어레이를 동결(성능이 훨씬 향상됨)하면 Vue가 컨텐츠를 "재활성화"하지 않아도 된다.

그리고 해당 어레이에 개체를 추가해야 하는 경우 이전 개체를 다음으로 대체할 새 개체를 만드십시오.

state.searchResults = Object.freeze(state.searchResults.concat([item]))

그것은 더 큰 배열을 감안하더라도 꽤 저렴할 것이다.

두 번째 보기에서는 데이터 분할이 이 작업에 대해 그다지 좋지 않은 해결책이 아닌 것 같다.우리에게 필요한 것은 생부화 상태 대신에 게이터를 사용하는 것이다.우리는 들어오는 결과가 고유한 객체를 가진 배열이라고 가정한다.id그 해결책은 다음과 같이 보일 수 있다.

const state = {
    ids: []
}

let resultsCache = {};

const getters = {
    results: function(state) {
        return _.map(state.ids,id => resultsCache[id]);
    }
}

const mutations = {
    replaceResults: function(state,results) {
        const ids = [];
        const cache = {};
        (results||[]).forEach((r) => {
            if (!cache[r.id]) {
                cache[r.id] = r;
                ids.push(r.id);
            }
        });
        state.ids = ids;
        resultsCache = cache;
    },
    appendResults: function(state,results) {
        (results||[]).forEach((r) => {
            if (!resultsCache[r.id]) {
                resultsCache[r.id] = r;
                state.results.push(r.id);
            }
        });
    }
}

export default {
    getters,
    mutations,
    namespaced: true
}

나는 반응성을 제한하고 심지어 어떤 물체 속성이 반응하는 것을 허용하기 위해 부-포-바빌론이라고 불리는 포크를 만들었다.여기서 확인해봐.

이를 통해 Vue에게 vue나 vuex에 저장된 어떤 물체도 반응하지 않도록 할 수 있다.Vue에게 개체 속성의 특정 부분 집합을 반응적으로 만들도록 지시할 수도 있다.성능은 상당히 향상되고 큰 물체를 보관하고 통과시키는 편리함을 보통 vue/vuex에서와 같이 누릴 수 있다.

사용할 수 있다shallowRef이것을 성취하기 위해서.

먼저 가져오기:

import {shallowRef} from 'vue';

당신의 돌연변이에 당신은 다음과 같은 돌연변이를 가질 수 있다.

mutations: {
    setMyObject(state, payload) {
      state.myObject = shallowRef(payload.value);
    },
}

이렇게 하면 객체 교환이 추적되지만 객체 속성은 변경되지 않는다.

완전성을 위해 다음 문서를 참조하십시오.shallowRef:

https://v3.vuejs.org/api/refs-api.html#shallowref

참조URL: https://stackoverflow.com/questions/44307077/restrict-vue-vuex-reactivity