菜鸟教程小白 发表于 2022-12-13 04:33:08

javascript - 如何使用 Vue 对全局变量使用react？


                                            <p><p>我有一个注入(inject)了一些全局配置对象的移动 webview:</p>

<pre><code>Vue.prototype.$configServer = {
MODE: &#34;DEBUG&#34;,
isMobile: false,
injected: false,
version: -1,
title:&#34;App&#34;,
user: null,
host: &#34;http://127.0.0.1:8080&#34;
}
</code></pre>

<p>稍后 WebView 注入(inject)这个:</p>

<pre><code>Vue.prototype.$configServer = {
MODE: &#34;DEBUG&#34;,
title: &#34;App&#34;,
version: &#34;2.0&#34;,
isMobile: true,
injected: true,
host: &#34;http://127.0.0.1:8081&#34;
}
</code></pre>

<p>并尝试将其用于组件:</p>

<pre><code>const HomePage = {
key: &#39;HomePage&#39;,
template: &#39;#HomePage&#39;,
components: { toolbar },
data() {
    return {
      items: [
      {name:&#34;Login&#34;, link:&#34;login&#34;},
      ]
    }
},
computed:{
    config() {
      return Vue.prototype.$configServer
    }
},
};
</code></pre>

<p>但是页面没有更新。如何应对变化？</p>

<p>P.D:我确认对象已使用 safari 调试工具进行了更新。也可以在本地 html 中测试。</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>您实际上可以将其作为数据选项添加到主 vue 实例中，而不是将配置放入 Vue 的原型(prototype)中，这将保证您的所有配置属性都是响应式的。如文档中所述</p>

<blockquote>
<p>When you pass a plain JavaScript object to a Vue instance as its data option, Vue will walk through all of its properties and convert them to getter/setters using Object.defineProperty. </p>
</blockquote>

<p>话虽如此，每当您更新配置属性时，vue 都会对其使用react。</p>

<p>现在让我们看看如何在代码中做到这一点:</p>

<pre><code>new Vue(){
    data:{ //only place where data is not a function
      configServer = {
            MODE: &#34;DEBUG&#34;,
            isMobile: false,
            injected: false,
            version: -1,
            title:&#34;App&#34;,
            user: null,
            host: &#34;http://127.0.0.1:8080&#34;
      }
    }
}
</code></pre>

<p>现在，当您需要访问配置时，您可以使用 $root 从任何组件直接访问它。像 <code>this.$root.configServer</code>.</p>

<p>就是这样。</p>

<p>希望对你有帮助。</p></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - 如何使用 Vue 对全局变量使用react？，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/51275301/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/51275301/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - 如何使用 Vue 对全局变量使用react？