useState

Nuxt跨页面、跨组件全局状态共享可使用 useState（支持Server和Client ）

useState(init?: () => T | Ref): Ref
useState(key: string, init?: () => T | Ref): Ref

• key: 一个唯一的键，确保跨请求正确地去重复数据获取。如果您没有提供密钥，那么将为您生成一个唯一的文件和useState实例的行号的密钥。
• init: 在未启动时为状态提供初始值的函数。这个函数也可以返回一个 Ref。
• T: (typescript only) 指定状态类型

注意：

• useState只在setup或Lifecycle Hooks期间工作。
• 因为useState中的数据将被序列化为JSON，所以它不包含任何不能序列化的内容，例如类、函数或符号，这一点很重要。

使用步骤：

1. 在 composables 目录下创建一个模块，如： composables/states.ts
2. 在states.ts中使用 useState 定义需全局共享状态，并导出
3. 在组件中导入 states.ts 导出的全局状态

composables/useCounter.ts

export default function () {return useState("counter", () => 100); // Ref
}// export const useCounter = () => {
//   return useState("counter", () => 100);
// };

pinia

安装：

npm install @pinia/nuxt –-save

npm install pinia –-save

如有遇到pinia安装失败，可以添加 --legacy-peer-deps 告诉 NPM 忽略对等依赖并继续安装。或使用yarn

修改配置：
nuxt.config.ts

export default defineNuxtConfig({// 这里是配置Nuxt3的扩展的库modules: ["@pinia/nuxt"],
});

使用步骤：

1. 在store文件夹中定义一个模块，比如：store/counter.ts
2. 在 store/counter.ts 中使用defineStore函数来定义 store 对象
3. 在组件中使用定义好的 store对象
4. 注释：与vue3中一样

store/home.ts

import { defineStore } from "pinia";export interface IState {counter: number;homeInfo: any;
}export const useHomeStore = defineStore("home", {state: (): IState => {return {counter: 0,homeInfo: {},};},actions: {increment() {this.counter++;},async fetchHomeData() {const url = "http://codercba.com:9060/juanpi/api/homeInfo";const { data } = await useFetch(url);console.log(data.value.data);this.homeInfo = data.value.data;},},
});

使用

useState与pinia对比

共同点：

• 都支持全局状态共享，共享的数据都是响应式数据
• 都支持服务器端和客户端共享

Pinia优势：

• 开发工具支持（Devtools）
• 模块热更换
• 插件：可以使用插件扩展 Pinia 功能
• 提供适当的 TypeScript 支持或自动完成

集成element plus

安装：

npm install element-plus --save
npm install unplugin-element-plus --save-dev 

配置Babel对EP的转译
配置自动导入样式

nuxt.config.ts

import ElementPlus from "unplugin-element-plus/vite";
export default defineNuxtConfig({// dev buildbuild: {// 使用 Babel 进行语法转换transpile: ["element-plus/es"],},vite: {// 配置自动导入样式plugins: [ElementPlus()],},
});

使用：