useState
Nuxt跨页面、跨组件全局状态共享可使用 useState(支持Server和Client )
useState<T>(init?: () => T | Ref<T>): Ref<T>
useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>
- key: 一个唯一的键,确保跨请求正确地去重复数据获取。如果您没有提供密钥,那么将为您生成一个唯一的文件和useState实例的行号的密钥。
- init: 在未启动时为状态提供初始值的函数。这个函数也可以返回一个 Ref。
- T: (typescript only) 指定状态类型
注意:
- useState只在setup或Lifecycle Hooks期间工作。
- 因为useState中的数据将被序列化为JSON,所以它不包含任何不能序列化的内容,例如类、函数或符号,这一点很重要。
使用步骤:
- 在 composables 目录下创建一个模块,如: composables/states.ts
- 在states.ts中使用 useState 定义需全局共享状态,并导出
- 在组件中导入 states.ts 导出的全局状态
composables/useCounter.ts
export default function () {
return useState("counter", () => 100); // Ref
}
// export const useCounter = () => {
// return useState("counter", () => 100);
// };
<template>
<div class="home">
<div>{{ counter }}</div>
<button @click="addCounter">+1</button>
</div>
</template>
<script setup>
// counter -> Ref
const counter = useCounter();
function addCounter() {
counter.value++;
}
</script>
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"],
});
使用步骤:
- 在store文件夹中定义一个模块,比如:store/counter.ts
- 在 store/counter.ts 中使用defineStore函数来定义 store 对象
- 在组件中使用定义好的 store对象
- 注释:与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<any>(url);
console.log(data.value.data);
this.homeInfo = data.value.data;
},
},
});
使用
<template>
<div class="category">
<div>{{ counter }}</div>
<button @click="addCounter">+1</button>
<button @click="getHomeInfo">fetchHomeInfoData</button>
</div>
</template>
<script setup lang="ts">
import { storeToRefs } from "pinia";
import { useHomeStore } from "~/store/home";
const homeStore = useHomeStore();
const { counter, homeInfo } = storeToRefs(homeStore);
function addCounter() {
homeStore.increment();
}
function getHomeInfo() {
homeStore.fetchHomeData();
}
</script>
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 build
build: {
// 使用 Babel 进行语法转换
transpile: ["element-plus/es"],
},
vite: {
// 配置自动导入样式
plugins: [ElementPlus()],
},
});
使用:
<template>
<div>
<el-button type="danger" size="large">我是button</el-button>
</div>
</template>
<script setup lang="ts">
// 需要手动导入
import { ElButton } from "element-plus";
</script>