계산된 속성을 모든 구성 요소에 사용할 수 있도록 설정

계산된 속성을 모든 구성 요소에 사용할 수 있도록 설정

계산된 속성을 글로벌하게 사용할 수 있는 방법이 있습니까?

예를 들어, Vuex 스토어에 getter로 액세스할 수 있는 'isAdmin' 속성이 있다고 가정합니다.이 속성은 조건부 렌더링을 위한 많은 컴포넌트에서 사용됩니다.컴포넌트 계산 속성별로 선언하지 않고 모든 컴포넌트에서 사용할 수 있도록 하려면 어떻게 해야 합니까?

이미 글로벌 믹스인을 사용하여 이 작업을 수행할 수 있는 것이 권장되고 있습니다.그것은 먹히겠지만 유일한 방법은 아니다.

퍼포먼스에 큰 영향은 없을 것 같지만, 이것에 계산 속성을 사용하는 것은 다소 낭비라고 생각됩니다.각 구성 요소에는 자체 계산된 속성이 있으며 각 구성 요소에는 값의 캐시된 복사본이 유지됩니다.하지만 값은 모두 동일합니다.

또한 스토어 getter는 이미 그 단계에서 값을 캐싱하고 있기 때문에 계산된 속성 수준에서 캐싱한다고 해서 아무것도 절약할 수 없습니다.

대신 속성을 저장하기 위해 프록시하는 JavaScript 속성 getter를 Vue 프로토타입에 추가할 수 있습니다.기술적으로 계산된 속성은 아니지만 다음과 같이 작동합니다.

// These 5 lines are the important bit, the rest is just for demonstration purposes
Object.defineProperty(Vue.prototype, '$isAdmin', {
  get () {
    return this.$store.getters.isAdmin
  }
})

const store = new Vuex.Store({
  state: {
    isAdmin: false
  },
  
  mutations: {
    toggle (state) {
      state.isAdmin = !state.isAdmin
    }
  },
  
  getters: {
    isAdmin (state) {
      return state.isAdmin
    }
  }
})

new Vue({
  el: '#app',
  store,
  
  methods: {
    onClick () {
      this.$store.commit('toggle')
    }
  },
  
  watch: {
    $isAdmin () {
      console.log('$isAdmin watcher triggered')
    }
  }
})

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script>

<div id="app">
  <p>{{ $isAdmin }}</p>
  <button @click="onClick">Change</button>
</div>

한가지 잠재적으로 큰 장애물이다.으로서 VuexVue 인스턴스 내부적으론를 사용한다.isAdmin부동산은 원형에 정의한 자동으로 발송되는 계산된 속성 막후 Vuex에 의해에 사용되던 것과 충돌할 것이다.isAdmin흡착제다.In the example above I have dodged that problem by calling the component property$isAdmin대신.이 정도 문제는 이론에서, 또한이 끝나면 매장된 모델이 속성을 정의함으로써 피할 수 있습니다.

언급URL : https://stackoverflow.com/questions/59828175/make-computed-property-available-to-all-components