Portfolio


export default {
  install: (app, options) => {
    // 플러그인 코드는 여기에
  }
}


export default {
  install(app, options) {
    app.config.globalProperties.$fetch = (url, opts) => {
      return fetch(url, opts).then((res) => res.json());
    };
  },
};

fetch.js


import fetchPlugin from "~/plugins/fetch";

const app = createApp(App);
app.use(fetchPlugin);
app.mount("#app")

main.js


export default {
  created() {
    this.init();
  },
  methods: {
    async init() {
      const res = await this.$fetch(
        "https://jsonplaceholder.typicode.com/todos"
      );
      console.log(res);
    },
  },
};

App.vue


// mixin을 사용할 어플리케이션 정의
const app = Vue.createApp({
  mixins: [myMixin]
})


export default {
  data() {
    return {
      count: 1,
      msg: "mixin Hi",
    };
  },
};


<template>
  <h1 @click="msg += '!!'">
    {{ msg }}
  </h1>
  <Parent />
</template>

<script>
import Parent from "~/components/Parent";
import { computed } from "vue";

export default {
  components: {
    Parent,
  },
  provide() {
    return {
      msg: computed(() => this.msg),
    };
  },
  data() {
    return {
      msg: "hello vue",
    };
  },
};
</script>

App.vue


<template>
  <h1>Parent</h1>
  <Child />
</template>

<script>
import Child from "~/components/Child";
export default {
  components: {
    Child,
  },
};
</script>

Parent.vue


<template>
  <h1>Child</h1>
  {{ msg.value }}
</template>

<script>
export default {
  inject: ["msg"],
};
</script>

Child.vue


import { createApp } from 'vue'
import App from '~App'
import store from '~/store/index'

const app = createApp({ App })
// Install the store instance as a plugin
app.use(store)
app.mount('#app')

vuex 코드 패턴 main.js


import { createStore } from 'vuex'

export default createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

src/store/index.js


actions: {
	async fetchTodos({ commit }) {
		const todo = await fetch('api address').then(res => res.json())
		commit('updateMsg', todo.title)
	}
}

actions 활용 예제