Home-theater-designers
ЛоцалСтораге је веб АПИ, уграђен у прегледаче, који омогућава веб апликацијама да чувају парове кључ-вредност на вашем локалном уређају. Пружа једноставан метод за чување података, чак и након што затворите прегледач.
МУО Видео дана ПОМЕРИТЕ ДА БИСТЕ НАСТАВИЛИ СА САДРЖАЈЕМ
Можете да интегришете ЛоцалСтораге са својим Вуе апликацијама за складиштење листа и других података мале величине. Ово вам омогућава да одржавате корисничке податке у различитим сесијама апликације.
Након овог водича, имаћете функционалну Вуе апликацију која може да додаје и уклања задатке, чувајући податке користећи ЛоцалСтораге.
Подешавање Вуе То-До апликације
Пре него што почнете да кодирате, уверите се да јесте инсталирали Ноде и НПМ на вашем уређају .
Да бисте креирали нови пројекат, покрените ову нпм команду:
1Ф5А5Е3Ц95Б42А38533Д4Ф6ЦБ5ЦБФБ4Ф023ДФДЕ3
Команда ће морати да изаберете унапред подешену вредност за вашу нову Вуе апликацију пре креирања и инсталирања потребних зависности.
Неће вам требати додатне функције за ову апликацију за обавезе, па изаберите „Не“ за сва доступна унапред подешена подешавања.
Са постављеним пројектом, можете започети прављење апликације за обавезе помоћу ЛоцалСтораге-а.
зашто имессаге не ради на мом Мац -у
Креирање апликације То-До
За овај водич, креираћете две Вуе компоненте: Апп.вуе за целокупну структуру и Тодо.вуе за приказ листе задатака.
Креирање компоненте То-До
За компоненту Тодо, направите нову датотеку, срц/цомпонентс/Тодо.вуе . Ова датотека ће управљати структуром листе задатака.
Налепите следећи код у Тодо.вуе фајл:
3ЦД415390ЕЕ8А3Е73БЦА40Ф48БФА142099БФ7Е53Горњи исечак кода детаљно описује структуру Све саставни део. Поставља компоненту да прима податке и емитује догађаје коришћењем реквизита и прилагођених догађаја, респективно.
Да објасним даље, код користи Вуе реквизити за комуникацију између компоненти да прими све низ из његове родитељске компоненте, апп.вуе . Затим користи в-фор директива за приказивање листа за понављање кроз примљени низ задатака.
Код такође емитује прилагођени догађај, уклони све , са теретом индекс . Ово вам омогућава да уклоните одређени задатак са одређеним индексом у низу задатака.
Кликом на Уклони дугме, исечак покреће емисију прилагођеног догађаја у надређену компоненту. Ово указује да сте кликнули на дугме, подстичући извршење одговарајуће функције дефинисане у оквиру надређене компоненте, Апп.вуе.
Креирање компоненте приказа апликације
Пређите на апп.вуе да наставите са израдом апликације Тодо. Тхе Апликација компонента ће се бавити додавањем нових задатака и приказивањем Све саставни део.
Залепите следеће скрипта блокирајте у вашу датотеку Апп.вуе:
2ЦФА7Б6953650ЕЦЦДА51Ц14831899236Ф5137АД8Горњи исечак кода оцртава логику апп.вуе саставни део. Исјечак увози Све компоненту и иницијализује реактивне варијабле помоћу Вуе Цомпоситион АПИ-ја.
Код почиње увозом компоненте Тодо и реф функција са наведене путање и поглед , редом.
Исјечак затим иницијализује реактивни стринг, невТодо , да сачувате задатак који ћете унети. Такође иницијализује празну реактивну све низ, који држи листу задатака.
Тхе аддТодо функција додаје нове задатке у тодос низ. Ако невТодо није празан, гура се у низ након потврде и ресетује вредност невТодо да би вам омогућио да додате још задатака.
Функција аддТодо такође позива савеТоЛоцалСтораге, који чува низ задатака у ЛоцалСтораге претраживача. Исјечак користи сетИтем метода да се то постигне и конвертује низ задатака у ЈСОН стринг пре складиштења.
Такође дефинише а ремовеТодо функција која узима а кључ као параметар. Користи овај тастер за уклањање одговарајућег све из тодос низа. Након уклањања, функција ремовеТодо позива савеТоЛоцалСтораге да ажурира податке ЛоцалСтораге.
Коначно, код користи гетИтем метод који је доступан ЛоцалСтораге-у за преузимање претходно сачуваних задатака помоћу кључа тодос. Ако сте сачували задатке у ЛоцалСтораге претраживача, код их гура у тодос низ.
Сада сте обрадили логику компоненте Апп.вуе, налепите следећи код у шаблон блок ваше Вуе апликације да бисте креирали кориснички интерфејс:
Д1Ф40Е823608АДА8ЦЕФД5Е19Е99Б85Е667508351Шаблон користи в-модел , метод везивања података у Вуе-у да повежете унети задатак за невТодо реактивни низ. Шаблон такође користи в-он директива за руковање догађајима у Вуе-у кроз своју стенограм ( @ ).
Користи в-он за слушање оба клик и ући кључни догађаји за потврду новог Тодо-а.
Коначно, шаблон користи Све компоненту коју сте прво креирали да бисте приказали листу задатака. Тхе :све синтакса пролази све низ као пропрат компоненти Тодо.
Тхе @ремове-еверитхинг синтакса поставља слушалац догађаја да ухвати прилагођени догађај који Тодо компонента емитује и позове ремовеТодо функционишу као одговор.
Сада када сте завршили апликацију, можете одабрати да је стилизујете по свом укусу. Можете да прегледате своју апликацију тако што ћете покренути ову команду:
26714ЦА423Б263330Б211Е06ДД96Д26А1550ЦДЕ9Требало би да видите екран попут овога:
Можете да додајете или уклањате задатке у оквиру апликације Тодо. Штавише, захваљујући интеграцији ЛоцалСтораге-а, можете освежити апликацију или је потпуно затворити; ваша одабрана листа обавеза ће остати нетакнута.
Важност ЛоцалСтораге
Интеграција ЛоцалСтораге у веб апликације је од суштинског значаја и за почетнике и за искусне програмере. ЛоцалСтораге упознаје почетнике са постојаношћу података омогућавајући им да чувају и преузимају садржај који генерише корисник.
ЛоцалСтораге је важан јер можете осигурати да ваши кориснички подаци остану нетакнути током различитих сесија. ЛоцалСтораге елиминише потребу за сталном комуникацијом са сервером, што доводи до бржег учитавања и побољшаног одзива у веб апликацијама.