22 Vue.js 框架学习 — 集成路由与状态管理

在本节中，我们将学习如何在 Vue.js 应用中集成路由（Vue Router）和状态管理（Vuex）。这两个工具是开发中大型单页应用时非常重要的组件。

1. 集成路由（Vue Router）

1.1 安装 Vue Router

首先，我们需要安装 Vue Router。如果你是使用 Vue CLI 创建的项目，可以在创建时选择安装 Vue Router；如果已经创建了项目，可以通过以下命令单独安装：

npm install vue-router

1.2 配置 Vue Router

接下来，我们需要配置路由。创建一个新的路由文件，如 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 // `routes: routes` 的简写
});

export default router;

1.3 在主应用中使用路由

在 src/main.js 中引入并使用路由：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 导入路由实例

const app = createApp(App);
app.use(router); // 注册路由
app.mount('#app');

1.4 在组件中使用路由

使用 <router-link> 和 <router-view> 以便在组件中显示路由内容：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view /> <!-- 显示路由匹配的组件 -->
  </div>
</template>

2. 集成状态管理（Vuex）

2.1 安装 Vuex

要在 Vue 应用中集成状态管理，首先安装 Vuex：

npm install vuex@next

2.2 创建 Vuex Store

创建一个新的状态管理文件，如 src/store/index.js：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0 // 应用状态
  },
  mutations: {
    increment(state) { // 修改状态的方法（同步）
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  actions: {
    increment({ commit }) { // 提交 mutation（异步）
      commit('increment');
    },
    decrement({ commit }) {
      commit('decrement');
    }
  },
  getters: {
    getCount(state) { // 获取状态的方式
      return state.count;
    }
  }
});

export default store;

2.3 在主应用中使用 Vuex

在 src/main.js 中引入并使用 Vuex：

import { createApp } from 'vue';
import App from './App.vue';
import store from './store'; // 导入 Vuex store

const app = createApp(App);
app.use(store); // 注册 Vuex
app.mount('#app');

2.4 在组件中使用 Vuex

你可以在组件中通过 mapState 和 mapActions 来使用 Vuex：

<template>
  <div>
    <h1>计数: {{ count }}</h1>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState(['count']) // 映射 state
  },
  methods: {
    ...mapActions(['increment', 'decrement']) // 映射 actions
  }
};
</script>

3. 小结

在本节中，我们学习了如何：

• 安装和配置 Vue Router 以管理应用的路由。
• 创建 Vuex store 来管理应用的状态。
• 在组件中使用路由和状态管理。

通过这些知识，你可以构建更复杂的 Vue 应用，处理导航和状态管理。接下来，我们可以深入学习 Vue 的其他特性，或者实践更多的例子来巩固你的理解。