はじめに
Vue3のを使用して、todoのプログラムを書いてみたのだが、
その際に分かった Vue2とVue3の変更点や、
compositionApiを使用しての変更点を書いていきます。
$emit => context.emit
従来のVue.jsだと
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>
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を使用できるようになります。
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>
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だと、このようにストアをセットします。
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というもの使用し、ストアをセットする仕様になっています。
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することで使用することができます。
Example.vue
<script>
import { useStore } from 'vuex'
export default {
setup () {
const store = useStore()
}
}
</script>
vue-router
従来のvue-routerですと、以下のようなルーティング設定になります。
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を使用してルーティングを設定します。
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で設定した情報にアクセスすることができます。
Main.vue
<script>
import { useRoute } from 'vue-router'
export default {
setup () {
const route = useRoute()
}
}
</script>
おわり
以上が変更点の簡単なまとめになります。
こちらは設定での段階の変更を主に紹介いたしました。
これからVue3で開発などを行うとさらに変更に気づくと思われますので、随時アウトプットできたらいいなと思っております。