Vue сохранение данных в браузере

Обновлено: 07.01.2025

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

Директивы

Директивы - это атрибуты, определяемые v- префикс.

Директива	Описание
v-text	использует свойство как текстовое значение элемента
v-html	использует свойство как текстовое значение элемента, интерпретируя HTML
v-if	показывать элемент, только если условие истинно
v-else	показывает альтернативный элемент, если предыдущий v-if ложно
v-else-if	добавляет блок else if для v-if строить
v-show	похожий на v-if , но добавляет элемент в DOM, даже если он является ложным. Просто установите его на display: none .
v-for	выполняет итерацию по массиву или повторяемому объекту
v-on	слушать события DOM
v-bind	реактивно обновить атрибут HTML
v-model	устанавливает двустороннюю привязку для входных данных формы. используется в элементах формы, обновляет модель, когда пользователь изменяет значение поля формы
v-once	применяет свойство только один раз и никогда не обновляет его, даже если переданные данные изменяются

v-bind и v-on иметь сокращенный формат:

Пример v-if / v-else / v-else-if :

Условные

Вы можете встроить условное выражение в выражение, используя тернарный оператор:

Работа с элементами формы

Чтобы модель обновлялась, когда происходит событие изменения, а не каждый раз, когда пользователь нажимает клавишу, вы можете использовать v-model.lazy вместо просто v.model .

Работа с полями ввода, v-model.trim полезно, потому что автоматически удаляет пробелы.

И если вы принимаете число вместо строки, убедитесь, что вы используете v-model.number .

Изменение событий

я использую click в качестве примера, но относится ко всем возможным событиям

v-on:click.native запускать собственное событие DOM вместо события Vue
v-on:click.stop остановить распространение события клика
v-on:click.passive используетпассивная опция addEventListener
v-on:click.capture использовать захват событий вместо всплытия событий
v-on:click.self убедитесь, что событие щелчка не произошло из дочернего события, а произошло непосредственно с этим элементом
v-on:click.once событие будет срабатывать только один раз
v-on:submit.prevent : вызов event.preventDefault() при инициированном событии отправки, используется, чтобы избежать отправки формы для перезагрузки страницы

Для получения дополнительной информации о распространении, пузырчатой / захватывающей информации см. МойРуководство по событиям JavaScript.

Модификаторы событий мыши

v-on:click .left срабатывает только при нажатии левой кнопки мыши
v-on:click .right срабатывает только по щелчку правой кнопкой мыши
v-on:click .middle срабатывает только при нажатии средней кнопки мыши

Отправлять событие, только если нажата определенная клавиша

v-on:keyup.enter
v-on:keyup.tab
v-on:keyup.delete
v-on:keyup.esc
v-on:keyup.up
v-on:keyup.down
v-on:keyup.left
v-on:keyup.right

Модификаторы событий клавиатуры

Запускать событие только в том случае, если также нажата определенная клавиша клавиатуры:

.ctrl
.alt
.shift
.meta (cmd на Mac, клавиша Windows на Win)

v-привязка

v-bind .prop привязать опору вместо атрибута
v-bind .camel используйте camelCase для имени атрибута
v-bind .sync синтаксический сахар, который превращается в v-on обработчик обновления привязанного значения. Видетьэто.

Крючки жизненного цикла

beforeCreate вызывается до создания приложения
created вызывается после создания приложения
beforeMount вызывается до того, как приложение будет установлено в DOM
mounted вызывается после того, как приложение установлено в DOM
beforeDestroy вызывается до того, как приложение будет уничтожено
destroyed вызывается после уничтожения приложения
beforeUpdate вызывается перед обновлением свойства
updated вызывается после обновления свойства
activated вызывается, когда активируется поддерживаемый компонент
deactivated вызывается при деактивации поддерживаемого компонента

Встроенные компоненты

Vue предоставляет 5 встроенных компонентов:

<component>
<transition>
<transition-group>
<keep-alive>
<slot>

Глобальная конфигурация объекта Vue

В Vue.config объект имеет следующие свойства, которые вы можете изменить при создании экземпляра:

Свойство	Описание
silent	по умолчанию false, если true подавлять журналы и предупреждения
optionMergeStrategies	позволяет определитьиндивидуальная стратегия слияниядля вариантов
devtools	по умолчанию true при разработке и false при производстве. Вы можете переопределить эти значения.
errorHandler	позволяет установить функцию обработчика ошибок. Полезно для подключения Sentry и других подобных сервисов
warnHandler	позволяет установить функцию обработчика предупреждений, аналогичную errorHandler , но для предупреждений вместо ошибок
ignoredElements	используется, чтобы позволить Vue игнорировать пользовательские элементы, определенные вне его, напримерВеб-компоненты.
keyCodes	позволяют вам определять пользовательские ключевые псевдонимы для v-on
performance	по умолчанию false. Если установлено значение true, отслеживает производительность компонентов Vue в браузере DevTools.
productionTip	по умолчанию true. Установите значение false, чтобы отключить предупреждение «вы находитесь в режиме разработки» во время разработки в консоли.

Методы объекта Vue

Параметры, переданные объекту Vue

При инициализации объекта Vue вы передаете объект:

Этот объект принимает ряд свойств.

Свойство	Описание
data	позволяет передавать набор реактивных данных, которые будут использоваться приложением Vue. Все реактивные свойства должны быть добавлены во время инициализации, вы не можете добавить новые позже.
props	это набор атрибутов, которые предоставляются родительским компонентам в качестве входных данных.
propsData	данные по умолчанию для реквизита. Полезно только во время тестирования
methods	набор методов, определенных в экземпляре Vue
computed	как методы, но кешируются внутри
watch	позволяет просматривать свойства и вызывать функцию при их изменении

Пример определения данных, методов и вычисляемых свойств:

el устанавливает элемент DOM, на котором монтируется экземпляр. Это может быть селектор CSS или HTMLElement.
template шаблон, представленный в виде строки, который заменит смонтированный элемент
render в качестве альтернативы для определения шаблона вы можете определить шаблон с помощью функции рендеринга
renderError установить альтернативный выход, когда функция, прикрепленная к render терпит неудачу

Ресурсы экземпляра Vue

directives набор директив для связи с экземпляром Vue
filters набор фильтров для связи с экземпляром Vue
components набор компонентов, которые нужно связать с экземпляром Vue

Параметры композиции Vue

parent указывает родительский экземпляр
mixins устанавливает массив объектов миксина
extends расширить другой компонент

Другие параметры объекта Vue

name установка имени для компонента позволяет вам вызывать его, что полезно при отладке или когда вам нужно рекурсивно добавить компонент в его шаблон
functional если true, устанавливает компонент без состояния (нет data ) и без экземпляров (нет this ), что делает его более легким
model позволяет настроить свойство, используемое в событиях, полезно, например, при взаимодействии с формами
comments по умолчанию false. Если установлено значение true, сохраняет HTML-комментарии, помещенные в шаблоны.

Свойства экземпляра

Учитывая экземпляр Vue, сохраненный в переменной const vm = new Vue(/*. */) , вы можете просматривать его и взаимодействовать с ним.

Vue (произносится /vjuː/, примерно как view) — это прогрессивный фреймворк для создания пользовательских интерфейсов. В отличие от фреймворков-монолитов, Vue создан пригодным для постепенного внедрения. Его ядро в первую очередь решает задачи уровня представления (view), что упрощает интеграцию с другими библиотеками и существующими проектами. С другой стороны, Vue полностью подходит и для создания сложных одностраничных приложений (SPA, Single-Page Applications), если использовать его совместно с современными инструментами и дополнительными библиотеками.

Если вы хотите узнать больше о Vue перед тем как начать, мы создали видео с рассказом об основных принципах работы на примере проекта.

Если вы — опытный фронтенд-разработчик, и хотите узнать, чем Vue отличается от остальных библиотек или фреймворков, обратите внимание на сравнение с другими фреймворками.

Начало работы

В этом руководстве мы предполагаем, что вы уже знакомы с HTML, CSS и JavaScript на базовом уровне. Если же вы во фронтенд-разработке совсем новичок, начинать сразу с изучения фреймворка может быть не лучшей идеей — возвращайтесь, разобравшись с основами! Наличие опыта работы с другими фреймворками может помочь, но не является обязательным.

Проще всего попробовать Vue.js, начав с примера Hello World. Откройте его в другой вкладке, и изменяйте по ходу чтения руководства. Можно и просто создать index.html файл на диске и подключить Vue:

В разделе по установке описаны и другие варианты установки Vue. Обратите внимание, мы не рекомендуем новичкам начинать с vue-cli , особенно если нет опыта работы с инструментами сборки Node.js.

Если предпочитаете что-то более интерактивное, можете пройти эту серию уроков на Scrimba, которая представляет собой сочетание скринкастов и песочницы для проверки примеров кода, где вы можете остановиться и продолжить изучение в любое время.

Декларативная отрисовка

В ядре Vue.js находится система, которая позволяет декларативно отображать данные в DOM с помощью простых шаблонов:

Вот мы и создали наше первое Vue-приложение! Выглядит как простая отрисовка шаблона, но «под капотом» Vue выполнил немало работы. Данные и DOM теперь реактивно связаны. Как это проверить? Просто откройте консоль JavaScript в браузере (прямо здесь, на этой странице) и задайте свойству app.message новое значение. Вы тут же увидите соответствующее изменение в браузере.

Кроме интерполяции текста, можно также связывать атрибуты элементов:

Наведи на меня курсор на пару секунд, чтобы увидеть динамически связанное значение title!

Здесь мы встречаемся с чем-то новым. Атрибут v-bind , называется директивой. Директивы имеют префикс v- , указывающий на их особую природу. Как вы уже могли догадаться, они добавляют к отображаемому DOM особое реактивное поведение, управляемое Vue. В данном примере директива говорит «сохраняй значение title этого элемента актуальным при изменении свойства message в экземпляре Vue».

Условия и циклы

Управлять присутствием элемента в DOM тоже довольно просто:

Этот пример демонстрирует возможность связывать данные не только с текстом и атрибутами, но и со структурой DOM. Более того, Vue также имеет мощную систему анимации, которая автоматически применяет эффекты переходов, когда элементы добавляются/обновляются/удаляются.

Есть и другие директивы, каждая из которых имеет своё предназначение. Например, директива v-for для отображения списков, используя данные из массива:

Работа с пользовательским вводом

Чтобы пользователи могли взаимодействовать с вашим приложением, используйте директиву v-on для отслеживания событий, указав метод-обработчик:

Обратите внимание, в методе мы просто обновляем состояние приложения, не затрагивая DOM — всю работу с DOM выполняет Vue, а вы пишете код, который занимается только логикой приложения.

Vue также предоставляет директиву v-model , позволяющую легко связывать элементы форм и состояние приложения:

Разбиение приложения на компоненты

Важной концепцией Vue являются компоненты. Эта абстракция позволяет собирать большие приложения из маленьких «кусочков». Они представляют собой пригодные к повторному использованию объекты. Если подумать, почти любой интерфейс можно представить как дерево компонентов:

Во Vue компонент — это, по сути, экземпляр Vue с предустановленными опциями. Создать новый компонент во Vue просто:

Теперь его можно использовать в шаблоне другого компонента:

Пока что у нас получилось так, что во всех элементах списка будет один и тот же текст — это не очень-то интересно. Хотелось бы иметь возможность передавать данные от родительского в дочерние компоненты. Давайте изменим определение компонента, чтобы он мог принимать входной параметр:

Теперь можно передать текст задачи в каждый компонент с помощью v-bind :

Конечно, этот пример слегка надуман, но посмотрите сами — мы разделили наше приложение на два меньших объекта, и дочерний, в разумной мере, отделён от родительского с помощью интерфейса входных параметров. Теперь можно улучшать компонент <todo-item> , усложнять его шаблон и логику, но не влиять на родительское приложение.

В крупных приложениях разделение на компоненты становится обязательным условием для сохранения управляемости процесса разработки. Разговор о компонентах ещё далеко не окончен и мы вернёмся к ним позднее в этом руководстве, но уже сейчас можно взглянуть на (вымышленный) пример того, как может выглядеть шаблон приложения, использующего компоненты:

Отношение к пользовательским элементам Web Components

Вы могли заметить, что компоненты Vue довольно похожи на пользовательские элементы, являющиеся частью спецификации W3C Web Components. Дело в том, что синтаксис компонентов Vue и правда намеренно следует этой спецификации. В частности, компоненты Vue реализуют API слотов и специальный атрибут is . Но есть и несколько ключевых различий:

Спецификация Web Components была завершена, но она реализована ещё не во всех браузерах. Safari 10.1+, Chrome 54+ и Firefox 63+ уже поддерживают веб-компоненты. Компоненты Vue, напротив, не требуют никаких полифилов и работают во всех поддерживаемых браузерах (IE9 и выше). При необходимости компоненты Vue могут быть «обёрнуты» в нативные пользовательские элементы.

Компоненты Vue предоставляют возможности, недоступные в простых пользовательских элементах. Самые значимые из них: кросс-компонентная передача данных, коммуникация с использованием пользовательских событий и интеграция с инструментами сборок.

Готовы к большему?

Пока мы лишь кратко представили самые основные возможности ядра Vue.js — остаток этого руководства посвящён более детальному рассмотрению этих и других возможностей, поэтому советуем прочитать его целиком!

Видео Vue Mastery. Посмотрите бесплатный курс Vue Mastery Введение в курс Vue.

В этом рецепте мы сфокусируемся на Local Storage (далее — локальное хранилище), простейшем механизме хранения. Локальное хранилище использует систему ключ-значение для хранения данных. Это ограничивает нас хранением только простых значений, но сложные структуры данных возможно сохранять, если вы готовы сериализовывать их в JSON и обратно. Локальное хранилище подходит для небольших наборов данных, например, настроек пользователя или данных формы. Для больших объёмов данных, где требуются комплексные требования к хранению, лучше использовать IndexedDB.

Давайте начнём с простого примера в виде формы:

Этот пример имеет одно поле ввода, привязанное к свойству данных name в экземпляре Vue:

Обратите внимание на фрагменты mounted и watch . Мы используем mounted для управления загрузкой значения из localStorage. Для управления записью данных в базу, мы следим за значением name и немедленно записываем изменения.

Вы можете запустить этот пример самостоятельно здесь:

Введите что-нибудь в форму и затем обновите эту страницу. Вы заметите, что введённое вами ранее значение будет показано автоматически. Не забывайте, что ваш браузер предоставляет замечательные инструменты разработчика для просмотра хранилища на стороне клиента. Ниже пример в Firefox:

И вот пример в Chrome:

И наконец пример в Microsoft Edge. Обратите внимание, что вы можете найти сохранённые значения приложения на вкладке «Отладчик».

Небольшая заметка: инструменты разработчика также предоставляют возможность удалять значения из хранилища. Это может быть очень полезным при тестировании.

Немедленная запись значения может быть нецелесообразной. Давайте рассмотрим чуть более сложный пример. Во-первых, обновим форму.

У нас есть 2 поля (опять-таки связанные с экземпляром Vue), но теперь добавилась и кнопка, запускающая метод persist . Давайте посмотрим на код JavaScript.

Как и раньше, используем mounted для получения сохранённых данных, если такие были. На этот раз, однако, данные сохраняются только при нажатии кнопки. Мы также можем сделать любые проверки или преобразования перед сохранением значения. Вы также можете сохранить дату последнего обновления данных. С такими метаданными, метод mounted может проверять, следует ли сохранять значения снова или нет. Вы можете попробовать эту версию ниже.

Работа со сложными значениями

Локальное хранилище работает только с простыми значениями. Для хранения более комплексных значений (объектов или массивов) вам необходимо будет самостоятельно преобразовывать их в JSON и обратно. Ниже представлен пример сохранения массива кошек.

Это приложение состоит из простого списка сверху (с кнопкой для удаления кота) и небольшой формы внизу для добавления нового кота. Посмотрим на код JavaScript.

В этом приложении мы будем использовать Local Storage API вместо «прямого» доступа. Оба варианта работают, однако метод API в целом предпочтительнее. В хуке mounted мы получаем JSON-значение и преобразуем в объект. Если что-то пошло не так, мы предполагаем, что данные повреждены и удаляем их. (Помните, если ваше приложение использует хранилище на стороне клиента, пользователь в любое время имеет доступ к нему и может изменить на своё усмотрение).

Теперь у нас есть три метода для управления списком котов. Как addCat , так и removeCat обновляют данные экземпляра Vue в this.cats . Затем они вызывают метод saveCats , который занимается сериализацией и сохранением данных. Вы можете попробовать эту версию ниже.

Альтернативные варианты

В то время как Local Storage API относительно прост, в нём отсутствуют некоторые базовые возможности, которые будут полезны во многих приложениях. Следующие плагины оборачивают доступ к локальному хранилищу и упрощают его, а также добавляют такую функциональность, как, например, значения по умолчанию.

Во время серверного рендеринга, мы отображаем «снимок» нашего приложения. Асинхронные данные из наших компонентов должны быть доступны до того, как мы смонтируем приложение на стороне клиента — в противном случае клиентское приложение будет отображено с использованием другого состояния, а гидратация завершится ошибкой.

Для решения этой проблемы, полученные данные должны находиться вне компонентов представления, в специальном хранилище данных или в «контейнере состояния». На сервере мы можем предзагрузить и заполнить данные в хранилище перед рендерингом. Кроме того, мы будем сериализовывать и встраивать состояние в HTML после успешного рендеринга приложения. Хранилище на клиентской стороне сможет непосредственно получать вложенное состояние перед монтированием приложения.

Для этой цели мы будем использовать официальную библиотеку управления состоянием — Vuex

. Давайте создадим файл store.js , с некоторой симуляцией логики получения элемента на основе id:

Большую часть времени вы должны оборачивать state в функцию, чтобы она не вызвала утечек памяти при следующих запусках на стороне сервера. Подробнее

И обновляем app.js :

Итак, где мы должны размещать код, который вызывает действия по предзагрузке данных?

Данные, которые нам нужно получить, определяются посещённым маршрутом — что также определяет какие компоненты должны будут отобразиться. Фактически, данные необходимые для данного маршрута, также требуются компонентам, отображаемым для этого маршрута. Поэтому будет логичным разместить логику получения данных внутри компонентов маршрута.

Мы будем использовать опцию serverPrefetch (добавлена в версии 2.6.0+) в компонентах. Эта опция распознаётся рендерингом на стороне сервера и приостанавливает отрисовку до тех пор, пока Promise не разрешится. Это позволяет нам «дожидаться» асинхронных данных в процессе отрисовки.

Можно использовать serverPrefetch в любом компоненте, а не только в компонентах указываемых в маршрутах.

Вот пример компонента Item.vue , который отображается по маршруту '/item/:id' . Поскольку экземпляр компонента уже создан на этом этапе, он имеет доступ к this :

Необходимо проверять рендерился ли компонент на стороне сервера в хуке mounted во избежание выполнения логики загрузки дважды.

Можно увидеть одинаковую логику fetchItem() , повторяющуюся несколько раз (в коллбэках serverPrefetch , mounted и watch ) в каждом компоненте — рекомендуется создать собственную абстракцию (например, примесь или плагин) для упрощения подобного кода.

Теперь мы знаем что процесс отрисовки будет дожидаться получения данных в наших компонентах, но как же узнавать когда всё «готово»? Для этого потребуется использовать коллбэк rendered в контексте рендера (также добавлено в версии 2.6), который будет вызывать серверный рендер после завершения всего процесса рендеринга. В этот момент хранилище должно быть заполнено данными своего финального состояния. Затем мы можем внедрить его в контекст в этом коллбэке:

При использовании template , context.state будет автоматически встроен в финальный HTML как window.__INITIAL_STATE__ . На клиенте хранилище должно получить состояние перед монтированием приложения:

В большом приложении хранилище Vuex будет скорее всего разделено на несколько модулей. Конечно, также можно разделить код этих модулей на соответствующие фрагменты компонента маршрута. Предположим, что у нас есть следующий модуль хранилища:

Мы можем использовать store.registerModule для ленивой регистрации этого модуля в хуке serverPrefetch компонента маршрута:

Поскольку модуль теперь является зависимостью компонента маршрута, он будет перемещён в асинхронный фрагмент компонента маршрута с помощью Webpack.

Не забывайте использовать опцию preserveState: true для registerModule чтобы сохранять состояние, внедрённое сервером.

Резюме: Всегда есть подходящий способ общения.

FundebugАвторские права на перепечатку с разрешения принадлежат первоначальному автору.

Предисловие

Компоненты - одна из самых мощных функций vue.js, и объем экземпляров компонентов не зависит друг от друга, что означает, что данные между различными компонентами не могут ссылаться друг на друга. Вообще говоря, компоненты могут иметь следующие отношения:

Как показано на рисунке выше, все A и B, B и C, B и D являются родительско-дочерними отношениями, C и D - родственными отношениями, а A и C - отношениями между поколениями (могут быть несколькими поколениями).

Как выбрать эффективный способ коммуникации для разных сценариев использования? Это предмет, который мы хотим изучить. В этой статье описаны несколько способов связи между компонентами vue, такими как props, $emit / $on 、vuex、 $parent / $children 、 $attrs / $listeners И предоставьте / внедрите простые для понимания примеры для описания различий и сценариев использования, я надеюсь, что это поможет друзьям.

Ткните пожалуйста код этой статьиблог github, Бумага слишком мелкая, все делайте больше кода!

метод первый, props / $emit

Родительский компонент A передается дочернему компоненту B через props, а от B к A реализуется $ emit в компоненте B и v-on в компоненте A.

1. Родительский компонент передает значения дочернему компоненту.

Далее мы используем пример, чтобы проиллюстрировать, как родительский компонент передает значения дочернему компоненту: Как получить данные из родительского компонента App.vue в дочернем компоненте Users.vue users:["Henry","Bucky","Emily"]

Сводка: родительский компонент передает данные дочернему компоненту через свойства. Примечание. В компоненте есть три формы данных: данные, свойства, вычисленные.

2. Дочерний компонент передает значение родительскому компоненту (через форму события).

Затем мы используем пример, чтобы проиллюстрировать, как дочерний компонент передает значение родительскому компоненту: когда мы нажимаем «Vue.js Demo», дочерний компонент передает значение родительскому компоненту, и текст изменяется с исходного «Передача значения» на « Дочерний элемент передает значение родительскому компоненту, «чтобы реализовать передачу значения от дочернего компонента к родительскому компоненту.

Метод второй, $emit / $on

Этот метод использует пустой экземпляр Vue в качестве центральной шины событий (центра событий), которая используется для запуска событий и мониторинга событий, умно и легко для достижения связи между любыми компонентами, включая отца и ребенка, братьев и межуровневых. Когда наш проект относительно большой, мы можем выбрать лучшее решение для управления состоянием vuex.

1. Конкретный метод реализации:

2. Приведите пример

Предположим, есть три родственных компонента, а именно компоненты A, B и C. Как компонент C получает данные компонента A или B.

$on Пользовательские события data-a и data-b отслеживаются, потому что иногда неизвестно, когда событие будет инициировано, и обычно отслеживается в смонтированном или созданном хуке.

Метод третий, vuex

1. Кратко представьте принцип Vuex.

Vuex реализует односторонний поток данных. У него есть состояние для глобального хранения данных. Когда компонент хочет изменить данные в состоянии, это должно быть сделано с помощью мутации. Мутация также предоставляет режим подписчика для внешних плагинов, которые могут вызывать обновления данных состояния. Когда для всех асинхронных операций (обычно используемых для вызова внутреннего интерфейса для асинхронного получения обновленных данных) или пакетных синхронных операций требуется действие, но действие не может напрямую изменять состояние, ему все равно необходимо изменить данные состояния с помощью мутации. Наконец, в соответствии с изменением состояния, выполните рендеринг для представления.

2. Кратко опишите функции каждого модуля в процессе:

Компоненты Vue: компоненты Vue. На странице HTML он отвечает за получение интерактивных действий, таких как операции пользователя, и выполнение метода отправки для запуска соответствующего действия в ответ.
Диспетчеризация: метод запуска действий действия - единственный метод, который может выполнять действия.
actions：Модуль обработки рабочего поведения, который состоит из $ store.dispatch ('имя действия', data1) Для запуска. Затем commit () запускает вызов мутации и косвенно обновляет состояние. Отвечает за обработку всех взаимодействий, полученных Vue Components. Содержит синхронные / асинхронные операции, поддерживает несколько методов с одинаковыми именами и запускает их в порядке регистрации. В этом модуле выполняются операции, запрашиваемые из фонового API, включая запуск других действий и отправку мутаций. Этот модуль обеспечивает инкапсуляцию обещаний для поддержки последовательного запуска действий.
commit: Метод операции фиксации изменения состояния. Отправка мутации - единственный способ выполнить мутацию.
mutations：Способ операции изменения состояния определяется действиями в commit ('имя мутации') Для запуска. Это единственный рекомендуемый способ для Vuex изменить состояние. Этот метод может выполнять только операции синхронизации, а имя метода может быть только глобально уникальным. Некоторые крючки будут открыты во время операции для отслеживания состояния и так далее.
state: объект-контейнер управления состоянием страницы. Централизованно храните разрозненные данные объекта данных в компонентах Vue, что является глобально уникальным для единого управления состоянием. Данные, необходимые для отображения страницы, считываются из этого объекта, и механизм детализированного ответа на данные Vue используется для выполнения эффективных обновлений статуса.
геттеры: читать методы объектов состояния. Модуль не указан отдельно на рисунке и должен быть включен в рендеринг.Vue Components считывает объект глобального состояния с помощью этого метода.

3. Vuex и localStorage

Vuex - это диспетчер состояний Vue, и сохраненные данные адаптируются. Но сохраниться не будет, после обновления вернется в исходное состояние.Конкретный метод должен заключаться в том, чтобы сохранить копию данных в localStorage при изменении данных в vuex.После обновления, если в localStorage есть сохраненные данные, удалите их и замените состояние в хранилище.

Здесь следует отметить, что: в vuex все состояния, которые мы сохраняем, являются массивами, а localStorage поддерживает только строки, поэтому нам нужно использовать преобразование JSON:

Метод четвертый $attrs / $listeners

1. Введение

Когда для многоуровневого вложения компонентов необходимо передавать данные, обычно используется vuex. Но если вы просто передаете данные без промежуточной обработки, использование обработки vuex будет немного излишним. Для этой версии Vue2.4 предусмотрен другой метод ---- $attrs / $listeners

$attrs : Содержит привязки функций (кроме класса и стиля), которые не распознаются (и не получаются) реквизитами в родительской области. Когда компонент не объявляет никаких свойств, он будет включать все привязки родительской области (кроме класса и стиля) и может передавать v-bind = "$ attrs" внутренним компонентам. Обычно используется с опцией interitAttrs.
$listeners : Содержит прослушиватель событий v-on в родительской области (без декоратора .native). Он может передавать внутренние компоненты через v-on = "$ listeners"

Далее мы рассмотрим пример межуровневого взаимодействия:

Как показано на фиг. $attrs Представляет объект без унаследованных данных в формате . Vue2.4 предоставляет $attrs , $listeners Для передачи данных и событий связь между межуровневыми компонентами становится проще.

Проще говоря: $attrs против $listeners Два объекта, $attrs Он хранит свойства, не относящиеся к Props, связанные в родительском компоненте, $listeners Он хранит неродные события, связанные с родительским компонентом.

Метод пятый: предоставить / ввести

1. Введение

Vue2.2.0 добавляет API, эту пару опций нужно использовать вместе,Чтобы позволить компоненту-предку внедрять зависимость во всех своих потомков, независимо от того, насколько глубок уровень компонента, он всегда будет вступать в силу, когда устанавливаются отношения восходящего и нисходящего потоков.. В двух словах: компоненты-предки предоставляют переменные через провайдера, а затем вводят переменные в компоненты-потомки через inject.
API-интерфейс предоставления / внедрения в основном решает проблему связи между межуровневыми компонентами, но его сценарии использования в основном заключаются в том, что подкомпоненты получают статус компонентов верхнего уровня, и между межуровневыми компонентами устанавливается связь между активным предоставлением и внедрением зависимостей.。

2. Приведите пример

Предположим, есть два компонента: A.vue и B.vue, B - дочерний компонент A

Как видите, в A.vue мы создалиprovide: name, Ценность плывет по волнам, ее роль заключается в том, чтобыname Эта переменная предоставляется всем его дочерним компонентам. А в B.vue через inject Ввести предоставленный компонент Aname Variable, то в компоненте B вы можете напрямую передатьthis.name После доступа к этой переменной ее значение также находится в волнах. Это основное использование provide / inject API.

нужно знать:Привязки provide и inject не реагируют. Это сделано намеренно. Однако, если вы передаете слушаемый объект, свойства объекта по-прежнему реагируют---- официальный документ vue
Итак, если имя A.vue выше изменится, B.vuethis.name Он не изменится, он все еще плывет по волнам.

3. Как предоставить и ввести данные ответа

Вообще говоря, есть два пути:

Предоставьте экземпляр компонента-предка, а затем внедрите зависимости в компоненты-потомки, чтобы вы могли напрямую изменять свойства экземпляра компонента-предка в компонентах-потомках, но этот метод имеет недостаток, заключающийся в том, что этот экземпляр монтируется с множеством ненужных вещей, таких как реквизиты , Методы
Используйте последнюю версию API Vue.observable 2.6 для оптимизации адаптивного предоставления (рекомендуется)

Давайте посмотрим на пример: дочерние компоненты D, E и F получают значение цвета, переданное компонентом A, и могут вносить изменения в зависимости от данных, то есть после изменения цвета компонента A компоненты D, E и F не изменятся соответственно (основной код показан ниже :)

Хотя provide и inject в основном предоставляют сценарии использования для высокоуровневых библиотек плагинов / компонентов, если вы сможете умело использовать их в бизнесе, вы сможете добиться эффекта умножения с половиной усилий!

Метод шестой $parent / $children против ref

ref : Если используется в обычных элементах DOM, ссылка указывает на элемент DOM; если используется в дочерних компонентах, ссылка указывает на экземпляр компонента
$parent / $children : Доступ к родительскому / дочернему экземпляру

Следует отметить, что: Оба из них предназначены для прямого получения экземпляра компонента, и вы можете напрямую вызвать метод компонента или получить доступ к данным после использования. Давайте сначала посмотрим ref Чтобы получить доступ к примеру компонента:

но,Недостатком этих двух методов является то, что они не могут общаться между уровнями или братьями.。

Мы хотим получить доступ к двум компонентам component-b на странице, ссылающейся на него (в данном случае parent.vue) в компоненте-a. В этом случае нам нужно настроить дополнительные плагины или инструменты, такие как Vuex и Bus s решение.

подводить итоги

Распространенные сценарии использования можно разделить на три категории:

Общение отца и сына:
Отец передает данные дочернему элементу через реквизиты, а дочерний элемент - родительскому через события ( $emit ); через родительскую цепочку / дочернюю цепочку также могут связываться ( $parent / $children ); ref также может обращаться к экземплярам компонентов; предоставлять / вводить API; $attrs/$listeners
Связь с братом:
Bus；Vuex
Межуровневое общение:
Bus；Vuex；provide / inject API、 $attrs/$listeners

Справочная статья

О Fundebug

Интеллектуальная рекомендация

Michael.W Поговорите о Hyperledger Fabric. Проблема 20 - Подробная индивидуальная сортировка узла с пятью порядками с исходным кодом для чтения.

Michael.W Поговорите о Hyperledger Fabric. Проблема 20 - Подробная индивидуальная сортировка узла с пятью порядками с исходным кодом чтения Fabric Файл исходного кода одиночного режима находится в ord.

Мяу Пасс Матрица SDUT

Мяу Пасс Матрица SDUT Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description Лянцзян получил матрицу, но эта матрица была особенно уродливой, и Лянцзян испытал отвращение. Чт.

Гессенская легкая двоичная структура удаленного вызова

Hessian - это легкая двоичная структура удаленного вызова, официальный адрес документа, в основном он включает протокол удаленного вызова Hessian, протокол сериализации Hessian, прокси-сервер клиента .

TCP Pasket и распаковка и Нетти Solutions

Основные введение TCP является ориентированным на соединение, обеспечивая высокую надежность услуг. На обоих концах (клиенты и терминалы сервера) должны иметь один или более гнезда, так что передающий.

Читайте также: