인스턴스에서 사용할 수 있는 Vue 비반응 데이터

인스턴스에서 사용할 수 있는 Vue 비반응 데이터

개체를 vue에 저장하려고 합니다. 개체를 전체 인스턴스에서 사용할 수 있어야 하며, 반응하지 않아야 합니다.일반적으로 (반응성이 있는 경우) 다음과 같이 '데이터'를 사용합니다.

new Vue({
  data: myObject
})

하지만 사실 myObject는 변경할 필요가 없기 때문에 반응적으로 만드는 것은 좋지 않다고 생각합니다.이것을 할 수 있는 방법이 있나요?

Vue 인스턴스 속성을 사용할 수 있습니다.

많은 컴포넌트에서 사용하고 싶은 데이터/유틸리티가 있을 수 있지만 글로벌 범위를 오염시키고 싶지 않습니다.이러한 경우 프로토타입에서 각 Vue 인스턴스를 정의하여 해당 인스턴스를 사용할 수 있도록 설정할 수 있습니다.

Vue.prototype.$appName = 'My App'

이제 $appName은 생성 전부터 모든 Vue 인스턴스에서 사용할 수 있습니다.실행하는 경우:

new Vue({
  beforeCreate: function () {
    console.log(this.$appName)
  }
})

레퍼런스: 링크

또는

해당 데이터 속성에 Vuex 상태를 사용하고 값을 변경하려는 경우에만 돌연변이를 정의할 수 있습니다.

Vuex를 이미 사용 중인 경우 데이터를 스토어 상태로 설정하고 읽기 전용으로 유지하기 위해 돌연변이를 제공하지 마십시오.

예를 들면...

const store = new Vuex.Store({
  state: myObject
})

// assuming you've added Vue.use(Vuex) if using a module system
new Vue({
  // el, data, etc
  store
})

Vue 인스턴스 또는 컴포넌트가

this.$store.state.somePropertyOfMyObject

언급URL : https://stackoverflow.com/questions/46168344/vue-non-reactive-data-available-on-instance