如何在Nuxt应用中用DOMPurify清洗输入并保存至Pinia仓库？

你遇到的DOMPurify is not defined错误，根源有两个：

• 组件中未导入DOMPurify核心库
• 调用DOMPurify的方式错误（正确用法是调用sanitize方法，而非直接调用DOMPurify）

方案1：组件内直接导入使用 #

1. 确保已安装DOMPurify（若未安装）：

npm install dompurify
# 或
yarn add dompurify
# 或
pnpm add dompurify

2. 在组件的<script setup>中导入DOMPurify，并修正调用逻辑：

<script setup>
import DOMPurify from 'dompurify'; // 新增导入
const entry = defineModel({ type: String, default: "" });
const appStore = useMyStore();

function recordEntry(event) {
  if (event.target.value !== "") {
    // 修正为调用sanitize方法执行清洗
    const sanitizedEntry = DOMPurify.sanitize(event.target.value);
    appStore.setAppState(sanitizedEntry);
  }
}
</script>

方案2：全局注入DOMPurify（无需每个组件重复导入） #

如果多个组件都需要用到DOMPurify，可以在Nuxt插件中全局注入：

1. 修改plugins/dompurify.ts文件：

import VueDOMPurifyHTML from "vue-dompurify-html";
import DOMPurify from 'dompurify';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueDOMPurifyHTML);
  // 将DOMPurify注入到全局，可通过$dompurify访问
  nuxtApp.provide('dompurify', DOMPurify);
});

2. 在组件中使用全局注入的DOMPurify：

<script setup>
const entry = defineModel({ type: String, default: "" });
const appStore = useMyStore();
const { $dompurify } = useNuxtApp(); // 获取全局注入的DOMPurify

function recordEntry(event) {
  if (event.target.value !== "") {
    const sanitizedEntry = $dompurify.sanitize(event.target.value);
    appStore.setAppState(sanitizedEntry);
  }
}
</script>

内容的提问来源于stack exchange，提问作者Peter Hentges