Vue3 触ってみて分かった変更点 

## はじめに
Vue3のを使用して、todoのプログラムを書いてみたのだが、
その際に分かった Vue2とVue3の変更点や、
compositionApiを使用しての変更点を書いていきます。

## $emit => context.emit
従来のVue.jsだと

```vue:Parent.vue
<template>
  <div>
    <Child @button-click='addNum'/>
  </div>
</template>

<script>
import Child from './components/Child.vue'

export default {
  components: { Child }
  data() {
    return {
      num: 0
    };
  },
  methods: {
    addNum(value) {
      this.num = value;
    }
  }
};
</script>

```

```vue:Child.vue
<template>
  <div>
    <button @click='send'>送信</button>
  </div>
</template>

<script>
export default {
  components: { Child },
  methods: {
    send() {
      this.$emit("button-click", 1);
    }
  }
};
</script>

```

としていたのですが、comopsitionAPIでemitを使用した場合は、
contextを使用して、emitを使用できるようになります。

```vue:Parent.vue
<template>
  <div>
    <Child @button-click='addNum'/>
  </div>
</template>

<script>
import { reactive } from 'vue'
import Child from './components/Child.vue'

export default {
  components: {
    Child
  }
  setup() {
    const state = reactive{(
     num: 0
    )}

    const addNum = (value) => {
      state.num = value
    } 
  }
};
</script>

```

```vue:Child.vue
<template>
  <div>
    <button @click='send'>送信</button>
  </div>
</template>

<script>

export default {
  setup(props, context) {
    const send = () => {
      context.emit("button-click", 1);
    } 
  }
};
</script>

```

## Vuex

従来のVuexだと、このようにストアをセットします。

```js:store/index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    num: 0
  },
  mutations: {}
})

store.commit('increment')

export default store

```

Vuex4では、 `createStore`というもの使用し、ストアをセットする仕様になっています。

```js:store/index.js
import { createStore } from "vuex";

export const store = createStore({
  state: {
    num: 0
  },
  mutations: {},
  actions: {},
  modules: {}
});

export default store

```

さらにcompositionAPIを使用して、ストアにアクセスする際も変更があります。

compositionAPIを使用してvuexを使用する場合
`vuex` から`useStore`というものをimportすることで使用することができます。

```vuejs:Example.vue
<script>
import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
  }
}
</script>
```

## vue-router
従来のvue-routerですと、以下のようなルーティング設定になります。

```js:router.js
import Vue from 'vue'
import Router from 'vue-router'
import Main from './views/Main.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Main',
      component: Main
    }
  ]
})

```

vue-router v4ですと　`createRouter`を使用してルーティングを設定します。

```js:router.js
import { createRouter, createWebHistory } from 'vue-router'
import Main from './views/Main.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [ 
    {
      path: '/',
      name: 'Main',
      component: Main
    }
 ]
})
...
app.use(router)

```

Vuex同様、ルーティングを扱う際に、compositionAPIでの書き方紹介いたします。
`vue-router`から`useRoute`をimportし、router.jsで設定した情報にアクセスすることができます。

```vue:Main.vue
<script>
import { useRoute } from 'vue-router'

export default {
  setup () {
    const route = useRoute()
  }
}
</script>

```

## おわり
以上が変更点の簡単なまとめになります。
こちらは設定での段階の変更を主に紹介いたしました。
これからVue3で開発などを行うとさらに変更に気づくと思われますので、随時アウトプットできたらいいなと思っております。

## 参考
- [Vuex ドキュメント](https://next.vuex.vuejs.org/)
- [vue-router ドキュメント](https://next.router.vuejs.org/)
- [Vue Router Next - 意外と語られない Vue 3 時代のルーティング / Vue Router Next - Routing in the Vue 3 that is not talked about unexpectedly](https://speakerdeck.com/line_developers/vue-router-next-routing-in-the-vue-3-that-is-not-talked-about-unexpectedly)
- [既存のVue.jsプロジェクトをVue 3へ移行したときに必要だった修正まとめ](https://qiita.com/laineus/items/d1f1f7972f521556a788)