16 nuxt3学习 （状态管理 集成element plus）_nuxt3+elementplus 后台管理系统

useState

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

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

• 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);
// };
1
2
3
4
5
6
7

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

pinia

安装：

npm install @pinia/nuxt –-save
1

npm install pinia –-save
1

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

修改配置：
nuxt.config.ts

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

1
2
3
4
5

使用步骤：

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<any>(url);
      console.log(data.value.data);
      this.homeInfo = data.value.data;
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

使用

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

useState与pinia对比

共同点：

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

Pinia优势：

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

集成element plus

安装：

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

配置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()],
  },
});

1
2
3
4
5
6
7
8
9
10
11
12
13

使用：

<template>
  <div>
    <el-button type="danger" size="large">我是button</el-button>
  </div>
</template>

<script setup lang="ts">
// 需要手动导入
import { ElButton } from "element-plus";
</script>

1
2
3
4
5
6
7
8
9
10
11