這兩天大概看了一下Vue 3的改版,於是就裝來玩看看,只要用vue cli 4就可以輕鬆將vue + vuex + vue-router 一併升級到支援現在的vue 3。
先全域安裝vue
npm install -g @vue/cli @vue/cli-service-global
開新的專案,建議先手選安裝vuex + Router
vue create hello-world
目前開的專案還會是舊的vue 2,要用下面指令即可升級到3,裡面程式碼他也會自動改寫
vue add vue-next
然後以前常在組件裡面用到router和vuex的變數,就用看看在Vue 3怎麼使用,如下
./views/About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<input v-model="capacity" />
<p>
Total:{{ capacity }}
</p>
<button @click="increaseTotal()">Increase Total</button>
<p>{{ store.state.msg }}</p>
<p>{{ route.params.id }}</p>
</div>
</template>
<script>
import { ref } from "vue";
import { useStore } from "vuex";
import { useRoute } from "vue-router";
export default {
name: 'About',
setup() {
// data
const total = ref(3);
const store = useStore();
const route = useRoute();
function increaseTotal() {
total.value++;
store.commit('setMsg', 'cooool');
}
return { total, increaseTotal, store, route }
}
}
</script>
./store/index.js
import Vuex from 'vuex'
export default Vuex.createStore({
state: {
msg: "good",
},
mutations: {
setMsg(state, value) {
state.msg = value;
}
},
actions: {
},
modules: {
}
});
./router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about/:id',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router