Express-Mysql-Vue3-TS-Pinia 项目实战：优雅的菜单展示

前端

2023-11-05 14:08:16

技术栈简介

本项目将使用以下技术栈：

Express.js：Node.js 框架
MySQL：关系型数据库
Vue3：渐进式 JavaScript 框架
TypeScript：JavaScript 的超集，提供类型检查
Pinia：Vuex 的替代品，用于管理应用程序状态

菜单展示

菜单是后台系统中至关重要的元素，提供对系统不同功能的导航。在我们的项目中，我们将使用 Vue Router 来管理路由，并使用 Pinia 来管理菜单状态。

步骤 1：配置路由

在 src/router/index.ts 中，定义菜单路由：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: HomeView,
    },
    {
      path: '/users',
      name: 'Users',
      component: UsersView,
    },
    // 添加其他菜单路由...
  ]
})

export default router

步骤 2：创建菜单组件

在 src/components/Menu.vue 中，创建菜单组件：

<template>
  <nav>
    <ul>
      <li v-for="item in menuItems" :key="item.name">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { useMenuStore } from '@/stores/menu'

export default defineComponent({
  setup() {
    const menuStore = useMenuStore()
    const menuItems = ref(menuStore.menuItems)

    return {
      menuItems,
    }
  }
})
</script>

步骤 3：使用 Pinia 管理菜单状态

在 src/stores/menu.ts 中，创建 Pinia 存储：

import { defineStore } from 'pinia'

export const useMenuStore = defineStore('menu', {
  state: () => ({
    menuItems: [
      { name: '主页', path: '/' },
      { name: '用户', path: '/users' },
      // 添加其他菜单项...
    ]
  }),

  // 其他操作...
})

集成菜单

在 src/App.vue 中，集成菜单组件：

<template>
  <div>
    <Menu />

    <router-view />
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import Menu from '@/components/Menu.vue'

export default defineComponent({
  components: { Menu },
})
</script>