Блог

У меня есть vue.js приложение, работающее на странице, сгенерированной php. Приложение vue развертывается в виде статических файлов js / css. HTML-файл с соответствующим <div id="app"> генерируется php. Какова наилучшая практика для ввода переменных из php через html в vue?

Я мог бы подумать о том, чтобы либо привязать их как атрибут данных к некоторым элементам html (что было бы довольно грязным взломом), либо сгенерировать <script> сегмент для хранения моих переменных — в этом случае я не уверен в области видимости.область видимости переменных и правильное объявление.

Спасибо

РЕДАКТИРОВАТЬ: данные, которые я хочу ввести, — это базовый URL-адрес и учетные данные для запросов ajax, инициированных vue, поэтому я не могу получить эти данные через ajax.

Szia Zsolt

Есть несколько способов сделать это, но я сделал это, обернув компонент / приложение Vue в пользовательскую функцию перед экспортом

Это выглядит примерно так

 import MyApp from './MyApp.vue';

export const mountApp = (el, props) =>
  new window.Vue({
    el,
    render: h => h(MyApp, {props}),
  });
  

Это позволяет вам определять компонент / приложение следующим образом

 <!-- load vue dependency -->
<script src="vue.js"></script>

<!-- load app code -->
<script src="/dist/app.js"></script>

<!-- create a div to for mounting the app/component-->
<div id="app"></div>

<!-- mount an instance of app to dom element and pass props -->
<script>
  mountApp('#app', {
    api: '/api', // <== add whatever config from the backend template with json_encode
  });
</script>
  

Я обнаружил, что это самый простой способ предоставления компонентов (виджетов) Vue во внешнюю среду. Обертывание функций монтирования внутри функции позволяет вызывать монтирование по требованию.
Единственное предостережение, на которое я укажу (помимо предположения, что ваши потребности совпадают с моими), заключается в том, что в моей настройке вместо webpack используется rollup, поэтому я не могу гарантировать вам, что тот же код будет работать из webpack одинаково, и вам может потребоваться смонтировать функцию в глобальном окне. Вместо export const mountApp = ... того, чтобы, возможно, потребуется сделать window['mountApp'] = ...

Я боролся в течение 2 дней, чтобы заставить это работать, но я не мог.

В конце концов я выбрал создание файла cookie со стороны сервера и прочитал его из своего vue.js применение. очень просто и приступил к работе за 10 минут.

1. установите пакет cookie

   npm устанавливает vue-cookies

2. импорт в main.js файл

   импорт Vue из «vue»;

   импортируйте VueCookies из ‘vue-cookies’;

   импортируйте приложение из «./App.vue»;

   Vue.use(VueCookies);

3. Затем используйте его в своем компоненте

   дата:функция(){

   возврат {

   myvariable: this.$cookies.get(«myVariable»)

   }
   }

полная информация здесь: https://reactgo.com/vue-get-cookie /