我有一個啓用了vue-router的應用程序，它使用單個文件.vue組件，使用browserify捆綁在一起。這個應用程序由一個瓶頸web服務器提供，它將全局配置設置（頁面標題，佈局順序等）作爲JSON傳遞給它。我一直在努力以一種乾淨的方式將全局變量傳遞給應用程序。從燒瓶網絡服務器傳遞全球JSON到Vue應用程序

main.js（用作入口點browserify）：

var Content = require('./vue/Content.vue'); 
var App = Vue.extend(); 
var router = new VueRouter({ history: true }); 
router.map({ 
    '/': { component: Content, name: 'home' } 
}); 
router.start(App, '#app');

的index.html，通過網絡服務器燒瓶

<body> 
{% with ga_id = ''|get_env('GA_ID') %} 
    <div id="app" ><router-view ga-id={{ga_id}} global-settings={{globalsettings|tojson|safe}}></router-view></div> 
{% endwith %} 
    <script type="text/javascript"> 
    window.global_settings = {{globalsettings|tojson|safe}}; 
    </script> 
    <script src="/js/build.js" defer></script> 
</body>

App.vue，應用程序的主要組成部分提供：

<template> 
</template> 
<script type="text/javascript"> 
    var app = { 
    props: ['gaId', 'globalSettings'], 
    ready: function ready() { 
     console.log(this.gaId); //returns expected string 
     console.log(this.globalSettings); //truncated at first space in the string 
     console.log(window.global_settings); // returns expected json 
    }, 
    module.exports = app; 
</script>

爲了完整起見，routes.py：

@APP.route('/', methods=['GET']) 
def index(): 
    settings = APP.app_config['settings'] 
    return render_template('index.html', rawsettings=settings)

感覺不對通過將其設定在window通過Vue的全局變量，但我一直無法將它傳遞的除外。

我嘗試使用數據功能Vue.extend在main.js：

Vue.extend({ 
    data: function() { 
    return { 
     global: 'test' 
    } 
    } 
})

但this.global在App.vue不確定。有更好的模式，我應該使用？

來源

2016-12-22 ebbishop

This feature來自Vue.js的官方API文檔意味着在任何組件內部，this.$root都會引用根Vue實例，或者在您的情況下引用App變量。

所以，理想情況下，要改變這一行：

window.global_settings = {{globalsettings|tojson|safe}};

到

App.global_settings = {{globalsettings|tojson|safe}};

，然後你可以使用任何this.$root.global_settings訪問組件global_settings。

但是，根據代碼的捆綁方式，App可能會在全局範圍內返回undefined。這使我更好點共...

考慮使用vuex

vuex是vuejs官方的狀態管理。基本上，它作爲所有組件共享狀態（或數據）的中心，完全符合「全局設置」的概念！ Vuex還具有非常強大的功能，特別適用於大型應用程序。但是，如果您不打算廣泛使用vuex，那麼類似我以前的方法可能更合乎需要或輕量級。

來源

2017-01-02 19:46:56

我正在調查vuex。但是我的問題仍然存在 - 我如何從'flask'到'vuex'的數據開始？ – ebbishop

從燒瓶網絡服務器傳遞全球JSON到Vue應用程序

回答

考慮使用vuex

相關問題