비반응 데이터를 Vuex에 저장하는 방법

비반응 데이터를 Vuex에 저장하는 방법

데이터는 VueJS 어플리케이션 초기화 전에 페이지 상에1회 로드되어 html 페이지는 새로고침되지 않지만 이 데이터는 항상 변경되지 않습니다(SPA가 아닌 고전 CGI 어플리케이션).데이터 예:

const nonReactiveObjectWithSomeNestedData = {
  a: 'a',
  b: {
    bb: 'bb',
    cc: { ccc: 'ccc' },
    dd: ['dd1', 'dd2']
  }
}

나는 이 데이터를 몇 가지 vue-components에서 사용하고 있다.이 데이터를 Vuex 네임슬레이드 모듈에 저장하고 Vuex-getters를 사용하여 다른 vue 컴포넌트에 동일한 기능을 래핑하는 것이 편리합니다.이 데이터를 vuex에 저장하지 않고 저장할 수 있는 방법이 있습니까?statevuex-timeout의 getter에서 액세스 할 수 있는 기능이 있습니까?

PS. 현재 vue-instance 메서드에 비반응 데이터 저장을 사용하고 있지만, 이 방법으로는 충분하지 않습니다.데이터에 대한 글로벌한 액세스(2개의 독립된 루트 컴포넌트에서)가 필요합니다.

개체를 저장소에 추가하기 전에 고정합니다.

Object.freeze(nonReactiveObjectWithSomeNestedData )

Vue는 동결된 물체를 반응시키지 않습니다.

주의: Vuex 변환/액션이 발생하기 전에 개체를 동결해야 합니다.

this.$store.dispatch('moduleName/setNonReactiveObject', 
    Object.freeze(nonReactiveObjectWithSomeNestedData));

변환 함수 내에서는 payload-parameter는 이미 반응합니다.

속성을 추가할 수도 있습니다._isVue반응하지 않도록 해야 합니다.

commit('setNonReactiveObject', Object.assign(data, { _isVue: true })

이 방법은 데이터가 저장되는 방법을 제어할 수 없는 경우 데이터를 비반응으로 만드는 데 유용합니다.예를 들어 서버 측에서 렌더링된 웹 사이트(예: Nuxt)를 "하이드레이트"하기 위해 저장소 데이터가 클라이언트 측으로 완전히 대체되는 경우입니다.

이것은 문서화되어 있지 않기 때문에 향후 파손될 가능성이 있습니다.적어도 소스 코드에는 이 속성이 내부적으로 사용되고 있음을 나타내는 코멘트가 있습니다.그리고 이곳은 물체를 관찰하기 전에 속성을 확인하는 곳입니다.

이렇게 해서 '반응성'을 없앨 수 있었다.

// create new variable and remove reactiveness, does a deep clone
var someNewNonReactiveVar = JSON.parse(JSON.stringify(someReactiveVar));

변환 파일에서는 반응하고 싶지 않은 페이로드의 딥 클론을 작성할 수 있습니다.

import _ from 'lodash';

    [mutationTypes.SET_INITIAL_STATE](state, payload) {
    // In order to make sure that this property is non-reactive deep clone it
    state.initialState = _.cloneDeep(payload)
}

이렇게 하면 초기 상태 또는 상태에 추가할 속성이 반응하지 않습니다.

언급URL : https://stackoverflow.com/questions/47452401/how-to-store-non-reactive-data-in-vuex