vue 3 个选项 api 数据可访问性

Question

有没有办法访问 vue option api。 假设以下代码。

 import {visualization} from "../util/Visualization"
 export default {
      data:() =>({
               foo = ''
         })
      }
    }

有没有办法在“visualization.js”中定义的函数可视化中访问“foo”，foo也与绑定，所以基本上可以通过js方法修改模板元素的值。</p> <p>已经广泛搜索了一个有效的示例，从我尝试过的所有方法来看，我可以做到这一点的唯一方法是使用 getElementById 访问元素，但这直接设置元素绕过破坏功能的变量。</p> </question> <answer tick="false" vote="0"> <p>您似乎需要所谓的<em>“单一事实来源”</em>。</p> <p>它可以是一个反应对象或一个商店。这一单一事实来源可以根据需要导入到任意多个位置（例如：您的组件和<pre><code>visualisation</code></pre>），并且每当更改值时，它们中的每一个都会收到更新。</p> <hr/> <p>反应式对象示例：</p> <p><strong>我的数据存储</strong></p> <pre><code>import { reactive } from 'vue' export const myData = reactive({ foo: 'bar' }) </code></pre> <p>然后，在任意多个地方：</p> <pre><code>import { myData } from './path/to/myDataStore/' // use (and modify) `myData.foo` </code></pre> <p>每当<pre><code>myData.foo</code></pre>收到新值时，所有使用它的地方都会更新。 <pre><code>myData.foo</code></pre> 也可用于 <pre><code>v-model</code></pre>。</p> <hr/> <p>商店示例： <strong>我的数据存储</strong></p> <pre><code>import { defineStore } from 'pinia' export const useMyDataStore = defineStore('myData', { state: () => ({ foo: 'bar' }) }) </code></pre> <p>然后，在任意多个地方：</p> <pre><code>import { storeToRefs } from 'pinia' import { useMyDataStore } from './path/to/myDataStore' const { foo } = storeToRefs(useMydataStore()) </code></pre> <p>现在 foo 是一个 <a href="https://vuejs.org/api/reactivity-core.html#ref" rel="nofollow noreferrer">ref</a>。您可以在 <pre><code>foo.value</code></pre> 内使用 <pre><code><script></code></pre> 和在 <pre><code>foo</code></pre> 内使用 <pre><code><template></code></pre>（包括 <pre><code>v-model</code></pre> 用法）。</p> </answer> </body></html>