VueJs 2를 사용한 글로벌 데이터

VueJs 2를 사용한 글로벌 데이터

저는 VueJ를 비교적 처음 접하는 사람이라 일부 데이터를 글로벌하게 사용할 수 있는 방법을 잘 모르겠습니다.API 엔드포인트, 사용자 데이터, API에서 취득한 기타 데이터 등의 데이터를 각 컴포넌트가 이 데이터에 접근할 수 있는 장소에 저장하고 싶습니다.
vanilla Javascript만으로 저장할 수 있지만 VueJs로 저장할 수 있는 방법이 있을 것 같습니다.이벤트 버스 시스템을 사용하여 데이터를 얻을 수 있을지 모르지만, 어떻게 하면 이 시스템을 제 요구에 맞게 구현할 수 있을지 모르겠습니다.

누가 좀 도와주시면 감사하겠습니다.

글로벌 데이터 개체 만들기

const shared = {
    api: "http://localhost/myApi",
    mySharedMethod(){
        //do shared stuff
    }
}

Vue에 공개해야 할 경우 가능합니다.

new Vue({
    data:{
        shared
    }
})

그렇지 않은 경우에도 Vues 또는 컴포넌트를 Import했거나 동일한 페이지에 정의된 경우에도 Vues 또는 컴포넌트 내에서 액세스할 수 있습니다.

정말 그렇게 간단해요.필요에 따라 공유된 정보를 속성으로 전달하거나 글로벌하게 액세스할 수 있습니다.

이제 막 시작했을 때는 복잡해질 필요가 없어요.Vuex는 많은 경우 권장되지만 소규모 프로젝트에서는 과잉인 경우가 많습니다.나중에 필요할 경우 추가하는 것이 그리 어렵지 않습니다.또한 국가 관리를 위한 것이기도 합니다. 글로벌 데이터에 액세스하고 싶은 것 같습니다.

화려해지고 싶다면 플러그인으로 하세요.

const shared = {
  message: "my global message"
}

shared.install = function(){
  Object.defineProperty(Vue.prototype, '$myGlobalStuff', {
    get () { return shared }
  })
}

Vue.use(shared);

Vue.component("my-fancy-component",{
  template: "<div>My Fancy Stuff: {{$myGlobalStuff.message}}</div>"
})

new Vue({
  el: "#app"
})

작성한 모든 Vue와 모든 컴포넌트가 이 Vue에 액세스할 수 있습니다.여기 예가 있습니다.

사용할 수 있습니다.Store응용 프로그램 상태를 유지합니다.

const store = new Vuex.Store({
  state: {
    userData: []
  },
  mutations: {
    setUserData (state, data) {
      state.userData = data
    }
  }
})

이를 통해 다음과 같이 상태 개체에 액세스할 수 있습니다.store.state를 사용하여 상태 변경을 트리거합니다.store.commit방법:

store.commit('setUserData', userData)

console.log(store.state.userData)

Vue Mixin

// This is a global mixin, it is applied to every vue instance. 
// Mixins must be instantiated *before* your call to new Vue(...)
Vue.mixin({
  data: function() {
    return {
      get $asset() {
        return "Can't change me!";
      }
    }
  }
})

템플릿

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="app">
  In Root: {{globalReadOnlyProperty}}
  <child></child>
</div>

또는

Vue.prototype.$asset = 'My App'

environment.js 파일을 사용하여 모든 엔드포인트를 개체 속성으로 저장합니다.

var urls = {};
urls.getStudent = "api/getStudent/{id}";
etc...

그런 다음 해당 엔드포인트에 액세스해야 하는 VueJS 코드가 있는 페이지의 문서 머리글에 이 environment.js 파일을 참조합니다.나는 이것을 하는 많은 방법들이 있다고 확신한다.

언급URL : https://stackoverflow.com/questions/43193409/global-data-with-vuejs-2