example: async() => {
console.log('start');
for (let i in this.orders) {
await this.getOrder();
console.log('loaded ' + i);
}
console.log('finish');
}
actions.loadMenu = async ({ commit, state }, payload) => {
if (!state.menus[payload.menu] || payload.force) {
let response = await Vue.axios.get('/menu/' + payload.menu);
if (response.status === 200) {
commit('setMenu', { menu: payload.menu, data: response.data });
}
}
};
import axios from 'axios';
export default new vuex.Store({
state: {
params: null,
},
mutations:{
setParams(state, payload){
state.params = payload;
}
},
actions: {
async getParams({comit, state}){
let response = await axios.get('information/account');
if (response.status === 200) {
commit('setParams', response.data);
}
}
}
});
import { mapState } from 'vuex';
export default {
name: 'IdWeb',
computed: {
...mapState([
'params'
])
},
mounted() {
this.$store.dispath('getParams');
},
}
<template>
<li class="state_account_id" v-if="params">
ID: {{params.id}}
</li>
</template>
methods: {
login() {
this.$auth.login({
params: {
email: this.email,
password: this.password
},
success: () => {
// handle redirection
const redirectTo = this.$auth.redirect()
? this.$auth.redirect().from.name
: this.$auth.user().role === 2
? 'admin.dashboard'
: 'dashboard'
this.$router.push({name: redirectTo})
},
error: error => {
this.has_error = true
this.errors = error.response.data.errors || {}
this.error = error.response.data.error
},
rememberMe: this.remember_me,
fetchUser: true
})
},
........
}
const mqDesktop = window.matchMedia('(min-width: 992px)');
const mqMobile = window.matchMedia('(max-width: 991px)');
mqDesktop.addListener(e => { if (e.matches) this.setBreakpoint('desktop');});
mqMobile.addListener(e => { if (e.matches) this.setBreakpoint('mobile'); });
if (mqDesktop.matches) this.setBreakpoint('desktop');
if (mqMobile.matches) this.setBreakpoint('mobile');
this.setBreakpoint()
— это мутация вьюкса. computed:{
classes(){
return {
pagination__btn_disabled: !this.prevPage,
[`pagination__btn_theme_${this.theme}`]: !!this.theme,
}
}
}
<button
class="pagination__btn"
:class="classes"
:disabled="!prevPage"
type="button"
title="Назад"
@click="onPrevPage"
>
<img class="pagination__icon" src="/svg/admin/pagination/prev.svg" alt="Назад">
</button>
<div id="app">
<router-view></router-view>
</div>
<main class="main">
<app-aside></app-aside>
<router-view></router-view>
</main>
<section class="app__section">
<section-header></section-header>
<router-view></router-view>
</section>
data() {
return {
isShowHelloBlock: false,
}
}
<div :class="{someClass : isShowHelloBlock}">Hello</div>
<button @click="isShowHelloBlock = true">toggle block</button>
@font-face {
font-family: 'Geometria';
src: local('Geometria Thin'), local('Geometria-Thin'),
url('~@/assets/fonts/geometria/Geometria-Thin.woff2') format('woff2'),
url('~@/assets/fonts/geometria/Geometria-Thin.woff') format('woff');
font-weight: 100;
font-style: normal;
}
import '@/styles/main.scss';
import Vue from 'vue';
//...
@import "base/normalize";
@import "base/init";
@import "base/typography";
@import "base/code";
@import "base/links";
@import "base/tables";
@import "base/buttons";
@import "base/control-group";
@import "base/general-form";
@import "parts/transitions";
...
$NODE_ENV: development;
@import "cfg-vars";
$NODE_ENV: production;
@import "cfg-vars";
$DEV_MODE: $NODE_ENV == development;
$MAX_INT32: 2147483647;
@import "cfg-vrhythm";
@import "cfg-grid";
@import "../../../node_modules/vrhythm/source/vrhythm";
@import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
@import "../mixins";
@import "cfg-z-indexes";
$wt-family-base: "Open Sans", sans-serif;
$wt-family-head: "Roboto Slab", serif;
$font-family-monospace: "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
//==
//== Color palette
//== ======================================= ==//
$palette-light-blue: #3c8dbc; // Primary
$palette-red : #dd4b39; // Danger
$palette-green : #00a65a; // Success
$palette-aqua : #00c0ef; // Info
$palette-yellow : #f39c12; // Warning
...
const NODE_ENV = process.env.NODE_ENV === 'development'
? 'development'
: 'production';
//...
module.exports = {
//...
css: {
extract: NODE_ENV === 'production',
loaderOptions: {
sass: {
data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
},
},
},
};
{
...
chainWebpack: config => {
config.plugins.delete('prefetch');
config.plugins.delete('preload');
},
...
}