javascript - Vue.js 使用外部对象计算函数

Question

是否可以将 Vue 的computed属性与外部对象一起使用？

为了说明我的意思，这是我想象的代码示例：

<!-- Vue file -->

<template>
    <div>{{data.auth}}</div>
</template>

<script>
import {_data} form "./data"

export default {
    computed: {
        data() { return _data }
    }
}
</script>

<!-- data.js file -->

let _auth = "123";

export let _data = {
   auth: _auth
}

setTimeOut(() => _auth = "456", 2000)

我对这段代码的期望是 HTML 文档在 2000 毫秒后从“123”变为“456”。

但据我所知，这是行不通的。

标签： javascriptvue.js

Answer 1

使用 Vue 3，您可以导入ref以跟踪更改：

import { ref } from 'vue'

const _auth = ref('123')

export const _data = {
    auth: _auth
}

setTimeout(() => {
    _auth.value = '456'
}, 2000)

---

工作片段：

const _auth = Vue.ref('123')
const _data = {
  auth: _auth
}

setTimeout(() => {
  _auth.value = '456'
}, 2000)

Vue.createApp({
  data() {
    return {
      data: _data
    }
  }
}).mount('#app')

<script src="https://unpkg.com/vue@next"></script>

<div id="app">
  <div>{{ data.auth }}</div>
</div>