vue3、vuex和vue-router入门指南

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')