주입

현재 코드로는 컴포넌트에서 스토어를 사용할 때마다 store를 불러와 사용해야 합니다.

// components/BookList.vue

import store from "@/store";

export default {
  name: "BookList",
  data() {
    return {
      loading: false
    };
  },
  computed: {
    books() {
      return store.getters.availableBooks;
    }
  },
  created() {
    this.loading = true;
    store.dispatch("fetchBooks").then(() => (this.loading = false));
  }
};

다수의 컴포넌트에서 스토어를 사용할 때 매번 store를 불러들이는 과정 없이 바로 사용할 수 있도록 하는 Vue 애플리케이션에 주입(Injection) 방법을 알아봅니다.

스토어 주입

main.js 파일을 열어 스토어(store)를 불러와 Vue() 코드 내부에 주입합니다.

// main.js

import store from './store';

new Vue({
  store,
  render: h => h(App)
}).$mount('#app);

Vue 애플리케이션에 스토어 객체가 주입되면? 스토어를 불러오는 과정 없이 모든 컴포넌트에서 $store 인스턴스 속성으로 접근할 수 있습니다.

// components/BookList.vue

export default {
  name: "BookList",
  data() {
    return {
      loading: false
    };
  },
  computed: {
    books() {
      return this.$store.getters.availableBooks;
    }
  },
  created() {
    this.loading = true;
    this.$store.dispatch("fetchBooks").then(() => (this.loading = false));
  }
};

# 주입

# 스토어 주입

주입

스토어 주입