能否在JS文件/类中使用Vue Composition API变量？

下面是几个实用的实现方案，根据你的场景选择：

方案一：把Ref封装成独立Composable模块 #

如果你的Ref是通用状态，直接把它抽成独立的composable函数，JS类可以直接导入调用，和组件用法一致，状态还能自动同步。

示例代码：

// useUserState.js
import { ref } from 'vue'

// 封装需要的ref和操作方法
export function useUserState() {
  const userName = ref('')
  const setUserName = (name) => userName.value = name
  
  return { userName, setUserName }
}

JS类里使用：

// UserService.js
import { useUserState } from './useUserState'

export class UserService {
  constructor() {
    // 直接调用composable拿到ref
    this.userState = useUserState()
  }

  printUserName() {
    // JS里要手动取.value
    console.log(this.userState.userName.value)
  }

  updateUserName(newName) {
    this.userState.setUserName(newName)
  }
}

组件里也能复用这个composable，保证组件和类共享同一状态。

方案二：组件初始化类时传入Ref #

如果Ref是组件局部状态，只需要给当前类实例使用，最简单的方式就是在组件里把Ref作为构造参数传给JS类。

示例代码：
组件中：

<script setup>
import { ref } from 'vue'
import OrderManager from './OrderManager'

// 组件内创建的ref
const orderTotal = ref(0)
// 初始化类时把ref传进去
const orderManager = new OrderManager(orderTotal)

// 调用类方法操作ref
orderManager.addItem(50)
</script>

JS类中：

// OrderManager.js
export class OrderManager {
  constructor(orderTotalRef) {
    // 保存传入的ref引用
    this.orderTotalRef = orderTotalRef
  }

  addItem(price) {
    this.orderTotalRef.value += price
  }

  getTotal() {
    return this.orderTotalRef.value
  }
}

方案三：用Pinia全局状态管理（适合全局共享场景） #

如果你的Ref是全局需要的状态，直接用Pinia把状态抽成store，JS类可以直接导入store实例访问状态，不用依赖组件上下文。

示例代码：

// stores/cart.js
import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', () => {
  const cartItems = ref([])
  
  const addToCart = (item) => cartItems.value.push(item)
  
  return { cartItems, addToCart }
})

JS类里使用：

// CartService.js
import { useCartStore } from './stores/cart'

export class CartService {
  constructor() {
    this.cartStore = useCartStore()
  }

  getCartCount() {
    return this.cartStore.cartItems.value.length
  }

  addItemToCart(item) {
    this.cartStore.addToCart(item)
  }
}

注意事项 #

• JS类中访问Ref时必须手动加.value，Vue模板会自动解包，但JS代码里需要手动处理。
• 方案一或三中，composable/store默认是单例逻辑，多处使用时状态会自动同步。

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