Изменение данных в компоненте с помощью configfile вне скомпилированного пакета vue

Question

У меня есть файл js с приложением vuejs

Например, после того, как npm запустил watch-poll, я хочу изменить заголовок с помощью файла конфигурации

<div id="app"></div>
<script src="/js/app.js"></script>

App.js

import adrescheck from './components/adresCheck'
Vue.component('adres-check', adrescheck)
import Adrescheck from './Adrescheck.vue'

new Vue({
    el: '#app',
    store,
    render: h => h(Adrescheck)

});

Адресная проверка:

<template>
    <div>
        {{ title }}
        <adres-check standalone="true" showButton="true"></adres-check>
    </div>
</template>
<script>
    export default {
        data: function () {
            return {
                title: 'Test'
            }
        }
    }
</script>
<style scoped>

</style>

Редактировать:

Store.js

import config from "../../../../../../../../config.js"
state: {
    ...config,
}

getters: {
    hello(state){ return state.hello; },

Vue comp:

        },computed: {
            //your other computed properties
            ...mapGetters(["hello"])
        }

Шаблон:

{{ hello }}

Или созданный () this.hello возвращает неопределенное значение

Answer 1

Определенно, вы можете попробовать следующее (в app.js):

fetch("/js/config.js")
.then(res => res.text())
.then(eval)
.then(config => {
  /*
  Wait for the DOM to be fully loaded
  and use the config for your app
  */
});

Например, в вашем config.js:

({
  hello: "world"
});

Хотя я должен сказать, что eval действительно небезопасно и, как правило, является плохой практикой. Возможно, вы захотите переосмыслить конструкцию вашего приложения (например, использовать препроцессор / транспортер вместе с системой компоновки / сборки, импортируйте вашу конфигурацию через механизм импорта, который они предлагают).

Например, с Babel вместе с Webpack вы можете иметь (после правильной настройки)

//dev/config.js
export default {
  hello: "world"
};

//dev/app.js
import config from "./config"
/*
Wait for the DOM to be fully loaded
and use the config for your app
*/

Одним из многих преимуществ использования упаковщика является то, что вы также можете использовать Single File Components Vue , а также иметь абсолютный контроль над вашим приложением, даже не прибегая к хитростям и небезопасным утилитам, таким как eval .

EDIT
Кажется, вы используете vuex, вы можете использовать свой конфигурационный файл для инициализации свойства (или свойств) в состоянии хранилища, создания геттеров и просто использовать mapGetters в своих компонентах для доступа к указанному свойству (ам)

//where you configure you store
import config from "path/to/config"
import Vuex from "vuex"
const store = new Vuex.Store({
  state: {
    //your other states
    ...config
  },
  getters: {
    //your other getters
    hello(state){ return state.hello; }
  }
});

//in a component
import { mapGetters } from "vuex" 

export default {
  //everything else
  computed: {
    //your other computed properties
    ...mapGetters(["hello"])
  }
}

Я настоятельно рекомендую прочитать Руководство Vuex по основным понятиям для получения дополнительной информации о том, как использовать vuex.

РЕДАКТИРОВАТЬ 2: Динамическая загрузка
Если я правильно понимаю, вы не хотите статически загружать файл конфигурации, а вместо этого загружать его для каждой страницы (чтобы вы могли изменить его вручную и при этом наблюдать изменения без перекомпиляции). Поэтому вам нужно будет использовать действия с мутациями в дополнение к геттеру:

//config.js
({
  hello: "world"
})

//where you configure you store
import Vuex from "vuex"
const store = new Vuex.Store({
  state: {
    //your other states
    hello: ""
  },
  getters: {
    //your other getters
    hello(state){ return state.hello; }
  },
  mutations: {
    setHello(state, value){ state.hello = value; }
  },
  actions: {
    loadConfig(context){
      return fetch("path/to/config")
      .then(r => r.text())
      .then(eval)
      .then(config => {
        context.commit("setHello", config.hello);
        return config;
      });

      /*
      or if you use JSON
      return fetch("path/to/config")
      .then(r => r.json())
      .then(config => {
        context.commit("setHello", config.hello);
        return config;
      });
      */
    }
  }
});

//in a component
import { mapGetters } from "vuex" 

export default {
  //everything else
  computed: {
    //your other computed properties
    ...mapGetters(["hello"])
  }
}

//app.js
import store from "path/to/store"
store.dispatch("loadConfig").then(_ => {
  /*setup your app when the dom is fully loaded*/
});

Одним из недостатков является то, что мы вернулись к использованию eval. Однако, если вы можете использовать JSON вместо простого js для вашей конфигурации, то это будет безопаснее. Теперь, когда у вас есть действие loadConfig, вы также можете отправлять его всякий раз, когда хотите перезагрузить конфигурацию, для этого вам просто необходим доступ к хранилищу.