# VueProject

**Repository Path**: spe_dev/vue-project

## Basic Information

- **Project Name**: VueProject
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-17
- **Last Updated**: 2025-07-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## pinia使用

好的，理解你的要求。我们将在不改变你现有 `login.vue` 的 `Options API` 结构（即不使用 `<script setup>`）和其核心登录逻辑的前提下，无缝地集成 Pinia。

这个过程非常简单，只需要添加几行代码。

---

### 1. 修改 `login.vue` (保留 Options API)

我们只需要在 `<script>` 部分引入 `useUserStore`，然后在登录成功的地方调用它。

```vue
<template>
  <!-- 你的模板部分保持不变 -->
  <div class="login-container">
    <!-- ... -->
    <div class="login-form">
      <!-- ... -->
      <div v-if="!isPhoneLogin">
        <input v-model="accountUsername" type="text" placeholder="请输入用户名" />
        <input v-model="accountPassword" type="password" placeholder="请输入密码" />
        <div class="button-group">
          <!-- 我会为你加上一个 :disabled 状态，防止重复点击 -->
          <button @click="loginWithUsername" :disabled="isLoading">
            {{ isLoading ? '登录中...' : '登录' }}
          </button>
          <button @click="register" class="register-button">注册</button>
        </div>
        <!-- ... -->
      </div>
      <!-- ... -->
    </div>
  </div>
</template>

<script>
// 1. 引入 useUserStore
import { useUserStore } from '@/stores/user';

export default {
  data() {
    return {
      isPhoneLogin: false,
      accountUsername: '',
      accountPassword: '',
      phone: '',
      code: '',
      isLoading: false, // 建议添加一个加载状态
    };
  },
  methods: {
    toggleLoginMethod() {
      // ... 保持不变
    },
    getCode() {
      // ... 保持不变
    },
    async loginWithUsername() {
      try {
        const { accountUsername, accountPassword } = this;
        if (!accountUsername || !accountPassword) {
          alert("用户名和密码不能为空");
          return;
        }

        if (this.isLoading) return;
        this.isLoading = true;
        
        const response = await fetch('http://localhost:8080/login', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ accountUsername, accountPassword })
        });

        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        const data = await response.json(); // 假设后端总是返回 JSON
        if (!data) throw new Error("空响应");
        
        console.log("响应数据:", data);
        
        if (data.code === 200) {
          alert("登录成功");

          // ✨ 2. 在这里集成 Pinia
          // 获取 store 实例
          const userStore = useUserStore();
          // 调用 action 存储用户信息
          userStore.setUserInfo(data.data); 

          // 3. 登录成功后跳转到主页
          this.$router.push('/'); // 或者其他目标页面，比如 '/dashboard'

        } else {
          alert(data.message || "登录失败");
        }
      } catch (error) {
        console.error('登录错误:', error);
        alert(error.message.includes("JSON")
            ? "服务器返回数据格式错误"
            : "登录失败，请检查网络或联系管理员");
      } finally {
        this.isLoading = false;
      }
    },
    register() {
      this.$router.push({ name: 'RegisterPage' });
    }
  }
}
</script>

<style scoped>
/* 你的样式保持不变 */
</style>
```

#### 关键改动点：

1.  **`import { useUserStore } from '@/stores/user';`**: 在 `<script>` 顶部引入你的 Pinia store。
2.  **`const userStore = useUserStore();`**: 在 `loginWithUsername` 方法内部，当登录成功后，我们通过调用 `useUserStore()` 来获取 store 的实例。
3.  **`userStore.setUserInfo(data.data);`**: 我们将从后端获取的用户数据 (`data.data`) 传递给 store 的 `setUserInfo` action。这个 action 会负责更新状态并将其持久化到 `localStorage`。
4.  **`this.$router.push('/');`**: 登录成功并存储信息后，使用 Vue Router 进行页面跳转。

这样，我们就完全保留了你的原有代码结构和逻辑，仅仅在成功登录的流程中增加了调用 Pinia store 的步骤。

---

### 2. 合理的样例：在其他页面获取 `userId`

假设你的后端在 `data.data` 中返回了如下结构的数据：

```json
// 后端返回的 data.data 示例
{
  "userId": 12345,
  "username": "张三",
  "role": "admin",
  "avatarUrl": "http://example.com/avatar.png"
}
```

你的 `userStore.setUserInfo()` 会将这个完整的对象存入 Pinia 的 `userInfo` state 和 `localStorage`。

现在，让我们创建一个 `ProfilePage.vue` 页面来展示如何获取并使用这个 `userId`。

**`src/views/ProfilePage.vue` (使用 Options API)**

```vue
<template>
  <div class="profile">
    <h1>我的个人资料</h1>
    <div v-if="isLoggedIn">
      <p><strong>用户ID (User ID):</strong> {{ userId }}</p>
      <p><strong>用户名:</strong> {{ username }}</p>
      <button @click="handleLogout">退出登录</button>
    </div>
    <div v-else>
      <p>您尚未登录，无法查看个人资料。</p>
      <router-link to="/login">前往登录</router-link>
    </div>
  </div>
</template>

<script>
import { useUserStore } from '@/stores/user';
// 为了在 Options API 中更好地使用 Pinia，需要引入 mapState 和 mapActions
import { mapState, mapActions } from 'pinia';

export default {
  computed: {
    // 1. 使用 mapState 将 Pinia state 映射为组件的计算属性
    ...mapState(useUserStore, {
      // 将 store 中的 isLoggedIn 映射为 this.isLoggedIn
      isLoggedIn: 'isLoggedIn',
      // 将 store 中的 userInfo.userId 映射为 this.userId
      userId: (store) => store.userInfo?.userId,
      // 将 store 中的 userInfo.username 映射为 this.username
      username: (store) => store.userInfo?.username,
    })
  },
  methods: {
    // 2. 使用 mapActions 将 Pinia action 映射为组件的方法
    ...mapActions(useUserStore, ['logout']),

    handleLogout() {
      // 现在可以直接调用 this.logout()，它会自动调用 store 的 logout action
      this.logout();
    }
  }
}
</script>

<style scoped>
.profile {
  padding: 20px;
  font-family: sans-serif;
}
</style>
```

#### `ProfilePage.vue` 代码解释:

`mapState` 和 `mapActions` 是 Pinia 提供的辅助函数，用于在 Vue 2 风格的 Options API 中方便地使用 store。

1.  **`mapState(useUserStore, { ... })`**:
    *   它将 `useUserStore` 中的 state 映射为当前组件的 `computed` 属性。
    *   `isLoggedIn: 'isLoggedIn'` 表示创建一个名为 `isLoggedIn` 的计算属性，它的值等于 `userStore.isLoggedIn`。
    *   `userId: (store) => store.userInfo?.userId` 允许你进行更复杂的映射。这里我们创建了一个名为 `userId` 的计算属性，它的值是 `userStore.userInfo.userId`。使用可选链 `?.` 是一个好习惯，可以防止在 `userInfo` 还没加载好时出现 `null` 错误。

2.  **`mapActions(useUserStore, ['logout'])`**:
    *   它将 `useUserStore` 中的 `logout` action 映射为当前组件的一个 `method`。
    *   现在你可以在模板或方法中通过 `this.logout()` 来调用它，就好像它是组件自己的方法一样。

这个方案完全满足了你的需求：
*   登录页逻辑和结构保持不变。
*   成功登录后，用户信息被存入 Pinia。
*   其他页面可以轻松地通过 Pinia 获取到 `userId` 等任何需要的数据。