【项目实战】基于Vue3+TypeScript+Pinia的后台管理系统（coderwhy）

由于原项目已经是一个完整的后台管理系统，我们可以从中抽取一些核心代码来展示如何使用Vue3、TypeScript和Pinia来构建状态管理。

以下是一个简化的组件示例，展示了如何在Vue 3中使用Pinia来管理状态：

<template>
  <div>
    <h1>{{ userInfo.name }}</h1>
    <button @click="changeUserName">Change Name</button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
import { useUserStore } from '@/stores/userStore';
 
export default defineComponent({
  setup() {
    const userStore = useUserStore();
 
    // 获取用户信息
    const userInfo = userStore.userInfo;
 
    // 更改用户名称的方法
    function changeUserName() {
      userStore.updateUserInfo({ name: 'New Name' });
    }
 
    return {
      userInfo,
      changeUserName,
    };
  },
});
</script>

在这个例子中，我们使用了defineComponent来定义组件，并通过setup函数来初始化Pinia的userStore。我们从userStore中获取了userInfo状态，并且定义了一个changeUserName方法来更新用户名。

请注意，这个示例假设你已经有一个名为userStore的Pinia存储，并且它有userInfo和updateUserInfo的相应操作。在实际项目中，你需要根据自己的存储逻辑来调整这些细节。