Использование .once между компонентами

Question

Я использую. Как только метод запускается только один раз, но мое приложение позволяет пользователю переходить назад и вперед между шагами (компонентами), и как только пользователь переключает компонент, а затем возвращается, метод снова может запускаться.

Я пытался просто использовать логическое значение, хранящееся в данных $ store (Vuex), и проверить, чтобы оно срабатывало только один раз, но оно выбрасывает остальную часть приложения. Я не уверен, как добавление оператора if взаимодействует с остальными методами запуска.

<select v-model="updateActiveKeyword" @click.once="restOfAds()">
   <option
     v-for="option in options"
     :key="option.id"
     @input="dropDownSelect(option)"
     :bind="option"
     style="padding: 3px 80px;"
     >{{option}}</option>
   </select>

Я думаю, что, возможно, есть более простой способ использования. Как только я еще не нашел ответ в Интернете, где компонент может измениться.

Answer 1

Одним из вариантов может быть использование компонента <keep-alive>, поэтому компоненты не отображаются повторно при переходе от одного к другому, и этот прослушиватель событий .once может запускаться только один раз, поскольку это один и тот же экземпляр.

Проверьте этот пример .

Подробнее о <keep-alive> можно прочитать здесь

Он имеет свои собственные предостережения, о которых вы должны знать, такие как кэширование экземпляра компонента и выполнение хуков жизненного цикла.