Как правильно использовать строковые константы, которые подключаются отдельно в js-файле к сайту?

Question

Всем привет! Вопрос по VUE.js. Как правильно использовать строковые константы, которые подключаются отдельно в js-файле к сайту? Я попыталась интерполировать: но это не работает((

<template>
  <div class="cart-contents">
    <div class="cart-contents__header">
      <div class="cells fx-justify-between">
        <div class="cell cell-auto">
          <div class="cart-contents__header__title">
            {{ this.HEADER_TITLE }}
          </div>
        </div>
        <div class="cell cell-auto">
          <button
            class="cart-contents__header__erase js-cart-empty"
            @click="deleteAllProductsFromCart">
            {{ this.HEADER_REMOVE }}
          </button>
        </div>
      </div>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

так выглядит js-файл с константами

const HEADER_TITLE = "Список заказа";
const HEADER_REMOVE = "Очистить все";
const FOOTER_TITLE = "Итого:";
const CURRENCY_UNIT = "руб.";
const UNIT = "ед.";
const PRISE_FOR_UNIT = "Цена, за 1 ед.";
const ON_REQUEST_TEXT = "по запросу";
const EMPTY_CART_TITLE = "Ваша корзина пуста";
const EMPTY_CART_TEXT =
  "Выберите в каталоге интересующий товар и добавьте в корзину";
const EMPTY_CART_LINK_TEXT = "Перейти в каталог";

так выглядит js-файл с константами

В консоли ошибка по всем константам типа "Property "EMPTY_CART_TITLE" was accessed during render but is not defined on instance"

Как все-таки мне их правильно использовать?

Answer 1

Если вы хотите использовать статические данные в template, вам нужно добавить данные в контекст текущего экземпляра компонента (template получает и интерполирует данные из контекста this).

Vue выполняет процесс преобразования getter/setter во время инициализации экземпляра, таким образом свойство должно присутствовать в data объекте, чтобы Vue преобразовал его и сделал реактивным.

Учитывая это, вы можете добавить статические данные в хуке created, потому что, когда вызывается этот хук, Vue уже завершил фазу создания реактивных данных (observation phase) и не может обнаружить добавление или удаление свойств (чтобы сделать их реактивными).

const staticData = {
  HEADER_TITLE: "Список заказа",
  HEADER_REMOVE: "Очистить все",
  FOOTER_TITLE: "Итого:",
  CURRENCY_UNIT: "руб.",
  UNIT: "ед.",
  PRISE_FOR_UNIT: "Цена, за 1 ед.",
  ON_REQUEST_TEXT: "по запросу",
  EMPTY_CART_TITLE: "Ваша корзина пуста",
  EMPTY_CART_TEXT: "Выберите в каталоге интересующий товар и добавьте в корзину",
  EMPTY_CART_LINK_TEXT: "Перейти в каталог",
}


new Vue({
  el: "#app",
  created() {
    // добавление статических данных
    this.staticData = staticData;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(text,key) in staticData" :key="key">
    {{key}}: <b>{{ text }}</b>
  </div>
</div>

Более подробно об этом - Реактивность для объектов

БЛОГ НА HUSL

Как правильно использовать строковые константы, которые подключаются отдельно в js-файле к сайту?

Ответы (1 шт):