Vue组合式API中Provide/Inject变量修改失效及TS警告求助

核心问题分析 #

1. TypeScript警告原因：<script setup>语法中不存在this上下文，你在greet函数里错误使用this，同时函数参数的global/credentials和外部inject的变量重名，导致变量遮蔽。
2. 线上变量不生效原因：父组件provide的是ref响应式对象，但子组件错误地将其断言为普通boolean类型，并且没有通过.value修改响应式变量的值，本地开发环境的宽松检查让代码看似可用，线上打包后严格模式下失效。

具体修复步骤 #

1. 修正inject的类型定义 #

子组件中，inject获取的是父组件提供的ref对象，需要将类型声明为Ref<boolean>，而不是boolean：

import { inject, Ref } from 'vue';

const global = inject<Ref<boolean>>('global')!;
const credentials = inject<Ref<boolean>>('credentials')!;

注：!是非空断言，如果你能确保这些值一定会被provide，可以使用；如果需要处理未提供的情况，可以添加默认值，比如inject('global', ref(false))。

2. 修复greet函数的逻辑 #

• 移除函数参数中重名的global和credentials，避免遮蔽外部变量
• 直接通过.value修改响应式变量，不要使用this
• 添加上可选链避免DOM查询为null时报错

修正后的greet函数：

function greet() {
  const usr = document.querySelector("input[name=email]")?.value || '';
  const pass = document.querySelector("input[name=password]")?.value || '';
  
  if (usr === "guest@guest.com" && pass === "guest123#") {
    global.value = true;
    credentials.value = false;
    router.push("/app");
  }
}

3. 完整的Component B修正代码 #

<script setup lang="ts">
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/vue";

import router from "@/router";

import { inject, Ref } from "vue";

// 修正类型为Ref<boolean>
const global = inject<Ref<boolean>>('global')!;
const credentials = inject<Ref<boolean>>('credentials')!;

function greet() {
  // 添加可选链避免null报错
  const usr = document.querySelector("input[name=email]")?.value || '';
  const pass = document.querySelector("input[name=password]")?.value || '';
  
  if (usr === "guest@guest.com" && pass === "guest123#") {
    // 修改ref的value属性
    global.value = true;
    credentials.value = false;
    router.push("/app");
  }
}
</script>

额外建议 #

避免直接操作DOM获取输入值，建议在template中给输入框添加v-model绑定响应式变量，比如：

<input name="email" v-model="userEmail" />
<input name="password" v-model="userPassword" />

然后在script中声明：

const userEmail = ref('');
const userPassword = ref('');

这样代码更符合Vue的响应式逻辑，也更易于维护。

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