store.dispatch('заргузитьДанныеПользователя').then(() => {
new Vue({ ... });
});created() {
this.$store.dispatch('заргузитьДанныеПользователя');
},<div v-if="$store.state.данныеПользователя">
контент
</div>
<индикатор-загрузки v-else />
Vue нам предоставляет широкие возможности рендеринга компонента с помощью метода render. Сначала ищем все упоминания указателей на компоненты в пришедшем html и получаем по api данные, нужные для отображения этого компонента. Далее разбиваем весь html на дерево. В этом нам помогла библиотека himalaya. И затем собираем обратно html заменяя указатели на уже готовые компоненты.
import { compile } from 'vue-template-compiler';
import * as transpile from 'vue-template-es2015-compiler';
function toFunction(code) {
return `(function(){${code}})`;
}
export default () => {
const vueTemplate = '<div>{{album_1}}</div>'; //тут html для vue шаблона без оборачивания в template
const { render, staticRenderFns } = compile(vueTemplate, { preserveWhitespace: false });
return transpile(`(function(){
return {staticRenderFns:[${staticRenderFns.map(toFunction)}],render:${toFunction(render)}};
})()`);
}В компоненте так же прописано удаление "EventListener", но так как компонент сохраняет своё состояние (keep-alive), данный метод не удаляет "слушателя скролла".
myElem.select();
document.execCommand("copy");
keep-alive
switch = !switchпроисходит рендеринг двух разных списков
<transition name="fade">transition-group.<li v-for="elements in myData" v-if="elements.key == getKey()">
window.localStorage.setItem('token', jsonData.token);
//and another fetch
return fetch('/welcome', fetchOptions2 ); //тут просто скрытый запрос на серверwindow.localStorage.setItem('token', jsonData.token);
location.href='/welcome' // тут редирект на др страницу фронта
const webpack = require('webpack');
....
module.exports = {
...,
plugins: [
new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /ru/),
],
...
}