零基础Vite2+TS+Ant Design Vue后台管理系统开发（二）

2023-12-02 20:12:43

在现代Web开发中，使用Vite2、TypeScript和Ant Design Vue组合来搭建后台管理系统已成为一种趋势。这种组合不仅提供了高效的开发体验，还能确保代码的可维护性和可扩展性。本文将详细探讨如何使用Vue Router和Vuex来完善后台管理系统的功能。

Vue Router4.x

Vue Router 是一个强大的路由库，它允许开发者定义清晰的路由映射，从而在用户交互时动态加载相应的组件。这对于后台管理系统尤为重要，因为它通常包含多个页面和复杂的导航结构。

安装Vue Router

首先，需要在项目中安装Vue Router。可以通过以下命令来完成：

npm install vue-router@4.x

配置Vue Router

安装完成后，创建一个名为 router.js 的文件，并在其中配置路由。以下是一个基本的配置示例：

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在这个配置中，createRouter 和 createWebHistory 是Vue Router 4.x中的新API，它们提供了更好的灵活性和性能。

使用Vue Router

在Vue组件中使用Vue Router非常简单。可以通过 useRouter 钩子来访问路由实例，并利用 $router 和 $route 对象进行导航和状态管理。

import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()

    function navigateTo(path) {
      router.push(path)
    }

    return {
      router,
      navigateTo
    }
  }
}

Vuex4.x

Vuex 是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装Vuex

安装Vuex同样简单，只需运行以下命令：

npm install vuex@4.x

配置Vuex

创建一个名为 store.js 的文件，并在其中配置Vuex。以下是一个基本的配置示例：

import { createStore } from 'vuex'

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  }
})

export default store

在这个配置中，createStore 是Vuex 4.x中的新API，它提供了更好的类型支持和模块化能力。

使用Vuex

在Vue组件中使用Vuex也非常直观。可以通过 useStore 钩子来访问Vuex实例，并利用 $store 对象进行状态管理。

import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore()

    function incrementCount() {
      store.dispatch('increment')
    }

    return {
      store,
      incrementCount
    }
  }
}