Vue.js 타사 스크립트에서 사용할 구성 요소 데이터 속성을 노출하는 방법은 무엇입니까?

Question

글로벌 네임 스페이스를 오염시키지 않고 단일 파일 Vue 구성 요소에 데이터 속성을 표시하는 가장 깨끗한 방법이 무엇인지 궁금합니다. 내 주요 항목 파일 (app.js)에서

는 뷰에 대한 그래서 같이 뷰를 설정하고있다 :

import components from './components/components'; 

window.app = new Vue({ 
    el: '#vue', 

    store, 

    // etc. 
}); 

내 components.js 수입 나는 HTML 미리보기로 사용할 모든 구성 요소를. 이러한 구성 요소 중 일부는 직접 내 root 인스턴스의 구성 요소로 설정되지 않은 가져 오기 구성 요소입니다.

특정 단일 파일 Vue 구성 요소의 일부 데이터 속성을 표시하는 가장 좋은 방법은 무엇입니까?

// Expose this on `Search.vue`: 

data: { 
    // Filled with data from ajax request. 
    results: [] 
} 

내 뷰 인스턴스가 전 세계적으로 볼 수 있습니다 :

는 예를 들어 내가 Google 웹 로그 분석에 대한 결과의 배열에서 첫 3 개 객체를 전송하고 싶은 Search.vue 구성 요소를 가지고있다. 특정 구성 요소에 이름이나 다른 이름으로 쉽게 액세스 할 수 있습니까?

편집

지금까지 현재과 같이 게터를 통해 (나는 내 ​​가게 내에서 사용할 수있는) 내 속성에 액세스처럼 보이는 최선의 선택 : 개선하는 방법에 대한

this.$store.getters.propertyINeed 

어떤 제안 이것에 환영합니다.

Answer 1

Vuex 저장소에 필요한 데이터를 저장하는 것이 좋습니다. 보시다시피, srch-component에는 결과를 제공하는 계산 된 속성이 있으며 저장소에 데이터를 자동으로 전달하는 감시자가 있습니다. 그런 다음 app.$store과 같은 것을 사용하여 구성 요소를 변경하지 않고 데이터에 액세스 할 수 있습니다.

또한 모듈 (link)을 사용하여 저장소를 더 잘 관리 할 수 ​​있습니다.

Vue.use(Vuex) 
 

 
const store = new Vuex.Store({ 
 
    state: { 
 
    topSrchResult: [] 
 
    }, 
 
    mutations: { 
 
    updateTopSrchResult: (state, payload) => { 
 
     state.topSrchResult = payload 
 
    } 
 
    }, 
 
    actions: { 
 
    UPDATE_TOP_SRCH_RESULT: ({ commit }, data) => { 
 
     commit('updateTopSrchResult', data) 
 
    } 
 
    } 
 
}) 
 

 

 

 
Vue.component('srch-component', { 
 
    template: ` 
 
     <div> 
 
     <div>Input: <input v-model="inputVal" type="text"/></div> 
 
     <div>Search Results:</div> 
 
     <ul> 
 
      <li v-for="item in srchResult">{{item}}</li> 
 
     </ul> 
 
     </div> 
 
    `, 
 
    data() { 
 
     return { 
 
      inputVal: '', 
 
      dummyData: [ 
 
      'Scrubs', 'Hannah Montana', '30 Rock', 'Wizards of Waverly Place', 
 
      'How I Met Your Mother', 'Community', 'South Park', 'Parks and Recreation', 
 
      'The Office', 'Brooklyn Nine-Nine', 'Simpsons', 'Fringe', 'Chuck' 
 
      ]    
 
     } 
 
    }, 
 
    watch: { 
 
     srchResult() { 
 
      const payload = this.srchResult.length <= 3 ? this.srchResult : this.srchResult.slice(0,3) 
 
      this.$store.dispatch('UPDATE_TOP_SRCH_RESULT', payload) 
 
     } 
 
    }, 
 
    computed: { 
 
     srchResult() { 
 
     return this.dummyData 
 
      .filter(
 
      (item) => item.toLowerCase().includes(this.inputVal.toLowerCase()) 
 
     ) 
 
     } 
 
    } 
 
}) 
 

 
const app = new Vue({ 
 
    el: '#app', 
 
    computed: { 
 
     topSrchResult() { 
 
     return this.$store.state.topSrchResult 
 
     } 
 
    }, 
 
    store 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.1/vuex.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script> 
 
<div id="app"> 
 
    <div>Top Results</div> 
 
    <ul> 
 
    <li v-for="item in topSrchResult">{{item}}</li> 
 
    </ul> 
 
    <srch-component></srch-component> 
 
</div>