uni-app Vue3组合函数return变量在页面丢失响应式

发布于 1周前 作者 nodeper 来自 Uni-App

uni-app Vue3组合函数return变量在页面丢失响应式

开发环境 版本号 项目创建方式
Mac Macos HBuilderX

示例代码：

export function usePayFun() {  
    let payStatus = ref("pendding")  
     setTimeout( () => {  
            payStatus.value = 'complete'  
     }, 10000)  
    return {payStatus}  
}  

// 页面引用  
const {payStatus} = usePayFun()  

watch(payStatus, () => {  
    console.log(payStatus.value)  
})

操作步骤：

export function usePayFun() {  
    let payStatus = ref("pendding")  
     setTimeout( () => {  
            payStatus.value = 'complete'  
     }, 10000)  
    return {payStatus}  
}  

// 页面引用  
const {payStatus} = usePayFun()  

watch(payStatus, () => {  
    console.log(payStatus.value)  
})

预期结果：

  • watch 会监听执行

实际结果：

  • watch 不会监听执行

bug描述：

在uni-app里面使用Vue3的组合函数，组合函数return出来的变量，在页面里面丢失了响应式，页面视图不会更新，watch也监听不到变化


Harmonyos Next教程
6 回复

watch(() => usePayFun().payStatus, () => { console.log(payStatus.value) }) 这样试试呢


不行

你是用的vue2吗？
我用你上面的例子，是能正常监听到的，我用的是vue3，运行到H5和小米手机都是可以的

你可以吗？用的vue3

回复 1***@qq.com: 我测试的是可以的

在uni-app中使用Vue 3的组合式API（Composition API）时，如果遇到组合函数（composable function）中返回的变量在页面上丢失响应式的问题，通常是因为变量的响应式状态没有正确管理。以下是一个示例代码，展示了如何确保组合函数中返回的变量保持响应式。

示例代码

首先，我们定义一个组合函数useCounter，它包含一个计数器和增加计数器的功能：

// composables/useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  return {
    count,
    increment
  };
}

然后，在uni-app的页面组件中使用这个组合函数：

<!-- pages/index/index.vue -->
<template>
  <view>
    <text>Count: {{ count }}</text>
    <button @click="increment">Increment</button>
  </view>
</template>

<script setup>
import { useCounter } from '@/composables/useCounter';

const { count, increment } = useCounter();
</script>

<style scoped>
/* 添加一些样式以美化界面 */
button {
  margin-top: 20px;
  padding: 10px;
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 5px;
}
</style>

关键点解析

  1. 使用ref创建响应式变量：在useCounter函数中，我们使用Vue的ref函数来创建一个响应式的计数器count。

  2. 保持响应式：由于ref创建的变量是响应式的，并且我们在组合函数中直接返回了这个变量，Vue会自动追踪其变化，并在界面上更新。

  3. 在组件中使用组合函数：在index.vue页面中，我们通过script setup语法导入并使用useCounter函数。这样，页面中的count和increment函数都会保持响应式，点击按钮时，count的值会更新，并且界面也会相应更新。

注意事项

  • 确保你的uni-app项目已经升级到了支持Vue 3的版本。
  • 如果你在组合函数中使用了其他复杂的响应式逻辑（如reactive、computed等），确保这些逻辑也是正确管理的。
  • 如果响应式丢失，检查是否有变量被错误地赋值或覆盖，或者在组合函数外部被错误地修改。

通过上述示例和关键点解析，你应该能够在uni-app中正确地使用Vue 3的组合式API，并保持变量的响应式状态。

回到顶部