Composition APIを使用すれば、同じ論理的な関心事に関連するコードを並べることが出来る？可読性が良くなる？良くわからないけど、前にVue 2で書いたコードを書き換えてみる。
このドキュメントでは実際にどのように変更したかをメインに記載する。
ログイン画面（Login.vue）の例
・Vue 2
一見シンプルに見えるけれども、thisで参照するものが多すぎて、何が使えて、何が使えないのか、後から見るとわかりづらい。
<script>
import {AUTH_REQUEST} from '@/store/actions/auth'
export default {
data () {
return {
username: '',
password: '',
}
},
methods: {
login: function () {
const { username, password } = this
this.$store.dispatch(AUTH_REQUEST, { username, password }).then(() => {
this.$router.push(this.$route.query.redirect || '/')
}).catch(error => {
this.$message({
showClose: true,
message: error,
type: 'error'
})
})
}
}
}
</script>
・Vue 3.2
Vue 2で必要だった独特な書き方がなくなって、一般的なJavaScriptの書き方になっている。インポート、宣言部、関数とわかれていて、わかりやすくなっているように感じる。
<script setup>
import { reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { AUTH_REQUEST } from '@/store/actions/auth'
const store = useStore()
const router = useRouter()
const route = useRoute()
const state = reactive({
username: '',
password: ''
})
function login() {
const { username, password } = state
store.dispatch(AUTH_REQUEST, { username, password }).then(() => {
router.push(route.query.redirect || '/')
}).catch(error => {
ElMessage({
message: error,
grouping: true,
type: 'error'
})
})
}
</script>