• Как обмануть реактивность Vue?

    @alphamikle
    Действительно, сделайте пример, чтобы можно было понять, в чем именно проблема.
  • Какие вы знаете способы выполнения тяжелых задач на node.js?

    @alphamikle
    Полностью поддерживаю, эта фича делает ноду убер-платформой!
  • Как применить правила tslint к CodeStyle в PHPStorm?

    @alphamikle Автор вопроса
    Вы как раз о том, из чего мне нужно применить правила к CodeStyle.
    Вот из этого раздела необходимо применить правила
    5beae80c5ce71089545626.png
    к разделу этому:
    5beae834af03a481528904.png
    Смысл этого действия в том - чтобы можно было форматировать код по стандартному сочетанию клавиш - Ctrl + Alt + L, и писать изначально по правилам (например отступы по табу сразу как в конфиге TsLint'a.
    Безусловно, можно настроить все руками в этом кодстайле, но ищется, прежде всего самый краткий путь.
  • Как решить проблему с инициализацией начального состояния приложения Vue.js?

    @alphamikle Автор вопроса
    Лев Роскошин, если не трудно, поясните верность выбранных мной решений по устраиванию логики:
    Есть несколько страниц приложения, каждая доступна по роуту, условно:
    главная /
    список, пускай, фильмов /list/
    ну и другие..
    так вот если пользователь не залогинен, бэк бросит его на /
    при загрузке / перед созданием компонентов приложение стучится по одному жестко прописанному url /api/init/, получает данные о пользователе, и объект со списком других роутов api
    пользователь логинится по запросу уже на роут из объекта с роутами store.state.api.login. VueRouter переводит его на список фильмов - в списке фильмов уже доступен загруженный объект с api роутами, данные пользователя, при его создании подгружается список фильмов.
    Проблема вопроса касалась ситуации, когда пользователь был залогинен (бэк не бросит его на /), и переходил сразу на /list/ - в этом случае запрос в хуке created компонента List стучался по api из объекта сторы, который не успевал загрузиться, вот и были тупняки, как загрузить сначала объект со списокм api, и уже после - грузить список фильмов, заморочки со списокм api в сторе для единообразия и удобства - чтобы можно было обращаться к роутам api по тем же именам, которые заданы для них в контроллере симфони
  • Как решить проблему с инициализацией начального состояния приложения Vue.js?

    @alphamikle Автор вопроса
    У меня это так реализовано, но есть нюанс в том, что логинится пользователь не каждый раз заново, и открыть он может любую страницу (роут) сразу, и в этом случае данные для данного роута должны быть загружены, но загрузить их было нельзя, потому что не был загружен сам список роутов api)
    Страница авторизации
    <template>
        <div class="flex-center">
            <el-card class="form-card" :class="{'hide': isLoginned}">
                <el-form class="loginForm" :model="formData" :rules="rules">
                    <el-form-item prop="login" :error="formError.login.error" :validateStatus="formError.login.status">
                        <el-input v-model="formData.login" type="email" id="login" :clearable="true" prefix-icon="el-icon-info" placeholder="Логин" @focus="clearError('login')"></el-input>
                    </el-form-item>
                    <el-form-item prop="password" :error="formError.password.error" :validateStatus="formError.password.status">
                        <el-input v-model="formData.password" type="password" id="password" :clearable="true" prefix-icon="el-icon-info" placeholder="Пароль" @input="validateRePassword" @focus="clearError('password')"></el-input>
                    </el-form-item>
                    <transition name="fade-input">
                        <el-form-item v-if="formData.isReg" prop="rePassword" :error="formError.rePassword.error" :validateStatus="formError.rePassword.status">
                            <el-input v-model="formData.rePassword" type="password" id="repassword" :clearable="true" prefix-icon="el-icon-info" placeholder="Повторите пароль" @input="validateRePassword" @focus="clearError('rePassword')"></el-input>
                        </el-form-item>
                    </transition>
                    <div class="flex-full">
                        <el-button type="primary" plain icon="el-icon-question" @click="toggleRepass">{{ registrationButtonLabel }}</el-button>
                        <el-button type="success" plain icon="el-icon-success" @click="login">ОК</el-button>
                    </div>
                </el-form>
            </el-card>
        </div>
    </template>
    
    <script>
        export default {
            name: 'LoginForm',
            data() {
                return {
                    formData: {
                        login: 'batya@gmail.com',
                        password: '11335768',
                        rePassword: '',
                        isReg: false,
                    },
                    formError: {
                        login: {
                            error: '',
                            status: ''
                        },
                        password: {
                            error: '',
                            status: ''
                        },
                        rePassword: {
                            error: '',
                            status: ''
                        }
                    },
                    rules: {
                        login: [
                            { required: true, message: 'Введите email', trigger: 'blur' },
                            { type: 'email', message: 'Введите верный email', trigger: 'blur' },
                        ],
                        password: [
                            { required: true, message: 'Введите пароль', trigger: 'blur' },
                            { min: 6, message: 'Пароль должен быть длиннее 6 символов' },
                        ],
                    },
                    isLoginned: this.$store.state.isAuth,
                    api: {}
                }
            },
            computed: {
                registrationButtonLabel() {
                    return this.formData.isReg ? 'Вход' : 'Регистрация';
                }
            },
            methods: {
                login() {
                    this.clearErrors();
                    this.api = this.$store.state.api;
                    this.axios({
                        url: this.api.auth.path,
                        method: this.api.auth.method,
                        params: this.formData
                    }).then(r => {
                        this.$notify.success({
                            title: r.data.notification.title,
                            message: r.data.notification.message,
                            position: 'top-right'
                        });
                        const {initData} = r.data;
                        if (initData !== undefined) {
                            this.$store.commit('go', {path: '/list/'});
                            this.$emit('goToList');
                            for (let type in initData) {
                                this.$store.commit('set', {type: type, value: initData[type]});
                            }
                        }
                        if (this.formData.isReg) {
                            this.toggleRepass();
                        }
                    }).catch(e => {
                        if (e.response) {
                            const errors = e.response.data.errors;
                            for (let key in errors) {
                                this.formError[key].error = errors[key].title;
                                this.formError[key].status = 'error';
                            }
                        }
                    });
                },
                toggleRepass() {
                    this.formData.isReg = !this.formData.isReg;
                    if (!this.formData.isReg) {
                        this.formError.rePassword.error = '';
                        this.formError.rePassword.status = '';
                        this.formData.rePassword = '';
                    }
                },
                validateRePassword () {
                    if (this.formData.password !== this.formData.rePassword && this.formData.rePassword.length >= 6 && this.formData.isReg) {
                        this.formError.rePassword.error = 'Пароли должны совпадать';
                        this.formError.rePassword.status = 'error';
                    } else if (this.formData.password === this.formData.rePassword && this.formData.rePassword.length >= 6 && this.formData.isReg) {
                        this.formError.rePassword.error = '';
                        this.formError.rePassword.status = 'success';
                    } else {
                        this.formError.rePassword.error = '';
                        this.formError.rePassword.status = '';
                    }
                },
                clearError(field) {
                    for (let value in this.formError[field]) {
                        this.formError[field][value] = '';
                    }
                },
                clearErrors() {
                    for (let key in this.formError) {
                        for (let value in this.formError[key]) {
                            this.formError[key][value] = '';
                        }
                    }
    
                }
            }
        }
    </script>
    
    <style lang="stylus" scoped>
        .flex {
            &-center {
                display flex
                width 100vw
                height 80vh
                justify-content center
                align-items center
            }
            &-full {
                display flex
                justify-content space-between
                align-items flex-start
            }
        }
        .form-card {
            max-width 300px
            transition 0.3s
        }
    </style>


    Однако, может быть я не до конца понял ваше предложение
  • Как решить проблему с инициализацией начального состояния приложения Vue.js?

    @alphamikle Автор вопроса
    Спасибо за решение, оно действенное, но как бы это сказать, "не изящное"..
    Нет способа рендеринга приложения после получения первичных данных? Может быть вы сможете подсказать какие-то ресурсы по код-стайлу? (я хочу не просто научиться писать vue-приложения, а писать правильно, чтобы код был красивым, собственно это свое приложение и переписываю на более правильный стиль, допиливая прошлые упущения) И неужели предзагрузка начального состояния возможна только таймаутами?)
    (второе решение нравится больше, спасибо, изначально, когда писал коммент, его еще не было))
  • Как решить проблему с инициализацией начального состояния приложения Vue.js?

    @alphamikle Автор вопроса
    не использовал его, возможно потом воспользуюсь вашим советом)