Vue 3、Vuex 和 Vue Router 都是 Vue.js 生態系統中非常有用的庫。它們各自在 Vue.js 應用程序中扮演著重要的角色：Vue 3 是核心框架，Vuex 用于狀態管理，而 Vue Router 用于路由管理。下面是如何在 Vue 3 項目中使用這些庫的簡要說明。
創建Vue 3 項目
首先，我們需要創建一個新的 Vue 3 項目。我們可以使用 Vue CLI 或 Vite 來做到這一點。這里以 Vite 為例：
npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install
安裝 Vuex 和 Vue Router
在你的 Vue 3 項目中，你可以使用 npm 或 yarn 來安裝 Vuex 和 Vue Router。
npm install vuex@next vue-router@4
使用 Vuex 進行狀態管理
1、創建 Vuex Store
在 src 目錄下創建一個 store 目錄，并在其中創建一個 index.js 文件。
// src/store/index.js
import { createStore } from 'vuex'const store = createStore({state() {return {count: 0}},mutations: {increment(state) {state.count++}}
})export default store
2、在 Vue 應用中使用 Vuex
在你的主文件（通常是 main.js 或 main.ts）中，你需要導入并使用 Vuex store。
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'const app = createApp(App)app.use(store)
app.mount('#app')
3、在組件中使用 Vuex
現在你可以在 Vue 組件中通過 this.$store 訪問 Vuex store，或者使用 mapState 和 mapMutations 輔助函數來更簡潔地訪問狀態和提交變更。
使用 Vue Router 進行路由管理
1、創建 Vue Router 實例
在 src 目錄下創建一個 router 目錄，并在其中創建一個 index.js 文件。
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})export default router
2、在 Vue 應用中使用 Vue Router
同樣，在你的主文件中，你需要導入并使用 Vue Router。
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'const app = createApp(App)app.use(store)
app.use(router)
app.mount('#app')
3、在組件中使用 Vue Router
現在你可以在 Vue 組件中使用 和 來創建導航和顯示當前路由的組件。你也可以在組件的方法中使用 this.$router 來編程式地導航到不同的路由。
這只是一個基本的入門指南。Vuex 和 Vue Router 都提供了許多高級功能和選項，接下來的學習中，會陸續使用到。
)
)