以下是结合 **Vue3 Composition API + Pinia 状态管理** 以及 **Teleport 传送门**特性的完整代码案例，涵盖核心用法与进阶场景：
---
### ✅ 1. 基础组合式函数复用（Composition API）
创建一个可复用的计数器逻辑模块 `useCounter.js`：
```javascript
// src/composables/useCounter.js
import { ref } from 'vue';
export function useCounter(initialValue = 0, step = 1) {
const count = ref(initialValue);
const increment = () => count.value += step;
const decrement = () => count.value -= step;
const reset = () => count.value = initialValue;
return { count, increment, decrement, reset }; // 返回响应式对象和方法
}
```
**在组件中使用**：
```vue
当前值: {{ count }}
+1
-1
```
👉 **关键点**：通过自定义组合式函数实现逻辑复用，避免混入（mixins）带来的命名冲突问题。
---
### ✅ 2. Pinia 模块化状态管理（含持久化插件）
#### 📦 Step 1: 安装依赖 & 配置插件
```bash
npm install pinia pinia-plugin-persistedstate
```
创建主仓库入口 `stores/index.js`：
```javascript
// src/stores/index.js
import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); // 启用本地存储持久化
export default pinia;
```
**挂载到 Vue 实例**（`main.js`）：
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import store from './stores'; // 导入配置好的 Pinia 实例
createApp(App).use(store).mount('#app');
```
#### 📚 Step 2: 定义独立 Store（用户信息示例）
```javascript
// src/stores/user.js
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () => ({ name: 'Guest', loggedIn: false }),
actions: {
login(username) {
this.name = username;
this.loggedIn = true;
},
logout() {
this.name = 'Guest';
this.loggedIn = false;
}
},
persist: true // 自动持久化此 Store 的状态到 localStorage
});
```
**组件内调用**：
```vue
请登录
欢迎回来, {{ userStore.name }}!
```
👉 **优势**：模块化设计 + TypeScript友好 + 持久化支持，适合复杂应用拆分状态逻辑。
---
### ✅ 3. Teleport 实现模态框跨层级渲染
解决传统弹窗被父元素裁剪的问题，利用 `` 将子元素传送至指定容器：
```vue
```
**父组件触发显示**：
```vue
打开弹窗
```
👉 **效果**：即使嵌套在深层级组件中，弹窗始终以 `position: fixed` 形式覆盖全屏，规避 CSS z-index 地狱。
---
### 🔄 综合实战案例：购物车系统整合所有技术点
#### Store 设计（带计算属性）：
```javascript
// src/stores/cart.js
import { defineStore } from 'pinia';
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] as Array<{id: number, qty: number}> }),
getters: {
totalItems: (state) => state.items.reduce((sum, item) => sum + item.qty, 0), // 总件数
subtotal: (state) => state.items.reduce((sum, item) => sum + (item.price || 0) * item.qty, 0) // 小计金额
},
actions: {
addProduct(product) {
const existing = this.items.find(i => i.id === product.id);
if (existing) existing.qty++;
else this.items.push({ ...product, qty: 1 });
},
removeItem(id) {
this.items = this.items.filter(i => i.id !== id);
}
}
});
```
#### 组件联动 + Composition API：
```vue
{{ item.name }} × {{ item.qty }} | ￥{{ item.price * item.qty }}
删除
总计：{{ cartStore.subtotal }}元（共{{ cartStore.totalItems }}件）
```
👉 **亮点**：通过 Pinia 的 Getter 实现派生状态，配合 Composition API 保持组件逻辑集中。
---
### 💡 最佳实践总结
| 技术点 | 推荐用法 | 注意事项 |
|---------------------|--------------------------------------------------------------------------|------------------------------|
| Composition API | 按业务功能组织逻辑（如 `useXXX`），优先于 Options API | 避免过度拆分导致可读性下降 |
| Pinia | 模块化 Store + 插件扩展（如持久化）、DevTools调试 | 慎用全局状态防止滥用 |
| Teleport | 用于需要突破层级限制的元素（弹窗/通知），目标容器建议设为 `body` | 动态目标需绑定响应式变量 |
| TypeScript | 为 Store/Composition Function 添加类型注解提升开发体验 | 确保类型定义与运行时一致 |
评论区: