Vue3 Composition API如何从外部脚本修改组件状态？

## 2. 获取组件实例并修改状态
首先给目标组件添加ref属性（以根组件挂载为例）：
```vue
<!-- 根组件模板 -->
<template>
  <YourComponent ref="targetComp" />
</template>

// 假设你的Vue应用实例已挂载到window.app（创建应用时：const app = createApp(App).mount('#app'); window.app = app;）
const targetComponent = app._instance.refs.targetComp
if (targetComponent) {
  // 注意：ref类型的变量需要修改.value
  targetComponent.message.value = '外部脚本修改后的内容'
}

3. 全局状态管理（复杂场景推荐） #

如果多个外部脚本都需要修改这个状态，更优雅的方式是用Pinia或Vuex管理全局状态，避免直接操作组件实例：

用Pinia实现： #

1. 创建状态仓库

// src/stores/messageStore.js
import { defineStore } from 'pinia'
export const useMessageStore = defineStore('message', {
  state: () => ({
    content: 'Hello world'
  })
})

2. 组件中使用全局状态

<template>
  {{ messageStore.content }}
</template>

<script setup>
import { useMessageStore } from '@/stores/messageStore'
const messageStore = useMessageStore()
</script>

3. 外部脚本修改全局状态

// 外部脚本文件
import { useMessageStore } from '@/stores/messageStore'
// 确保Pinia已在Vue应用中注册
const messageStore = useMessageStore()
messageStore.content = '外部修改的全局内容'

内容的提问来源于stack exchange，提问作者Huy Phạm