ну хзхз) у нас среди потребителей смузи 90% веганов)

У нас во Владике кто что хочет, тот и пьёт, не делимся на группы ??

у нас тоже каждый пьет что хочет)

просто по группам) кто-то пиво в баре) кто-то смузи в кафе)

у нас тоже каждый пьет что хочет)

..., а веганы - смузи ?

я с коллегами в баре вино пью

не особо хочется пиво

они на меня презрительно косятся

я на машине езжу на работу, вовсе не пью с коллегами)

как по мне - не люблю к примеру пить и не пью. На мнение кого-то по барабану ?

Добрый день) Mutations во vuex позволяют только напрямую работать с состоянием, используя только state, но не используя другие мутаторы, геттеры и т.д. При этом они очень удобны в части vue-dev-tools Правильно ли я понимаю, что если мне требуется во множестве мутаторов сделать одно и тоже действие (тоже мутатор), то я должен поменять их все на action, и потерять прекрасные возможности отладки?

Привет, подскажите как лучше сделать. У меня есть компонент для отрисовки графика. Он связан со стором, который хранит информацию о данный, которые надо ренедерит. Этот компонент используется на разных страницах. Проблема сейчас в том, что когда перехожу на с одной страницы на другую, у меня в сторе хранятся данный прошлой страницы. Как мне кажется здесь проблема дизайна. Я это вижу как через пропс компонента передавать объект класс стор. Но кажется, что стор делать классом не очень идея, потому что как минимум не была предложена авторами. Другая идея более тривиальная - перед апдейтом данных чистить стейт.

Вью в топ-3 гитхаба по звездам уже

Нет, action для асинхронных действий

Добрый день) Mutations во vuex позволяют только напрямую работать с состоянием, используя только state, но не используя другие мутаторы, геттеры и т.д. При этом они очень удобны в части vue-dev-tools Правильно ли я понимаю, что если мне требуется во множестве мутаторов сделать одно и тоже действие (тоже мутатор), то я должен поменять их все на action, и потерять прекрасные возможности отладки?

что ты имеешь в виду под отладкой? Если нужно вызывать геттер, то передавай его через экшен в мьтеншен как аргумент

что ты имеешь в виду под отладкой? Если нужно вызывать геттер, то передавай его через экшен в мьтеншен как аргумент

Имею в виду vue-dev-tools, где можно классно смотреть, какие мутаторы вызывались, с какими параметрами и т.д.

Хотя, я уже понял, что action всё равно в итоге вызывает мутатор и всё нормально)

Простите, затупил

Товарищи, имеется проект, инициализированный через Vue CLI. К нему подключен bootstrap-vue, однако в итоге оказывается так, что компоненты даже тупо не собираются при компиляции. Подскажите, что я делаю не так? https://gist.github.com/kinjalik/d8fcb0d652975f12588f1feacade8eb0

Товарищи, имеется проект, инициализированный через Vue CLI. К нему подключен bootstrap-vue, однако в итоге оказывается так, что компоненты даже тупо не собираются при компиляции. Подскажите, что я делаю не так? https://gist.github.com/kinjalik/d8fcb0d652975f12588f1feacade8eb0

new Vue({ render: h => h(App) }).$mount('#app') Vue.use(BootstrapVue) местами поменяй

И выкинь bootstrap vue ))) PS: это личное ИМХО, холиварить не буду

Я бы выкинул, да тимлид требует

Ребят привет) у меня не получается подключить шрифты в файле sass, ругается на лоадеры, но в компоненте, к примеру App.vue все работает. это известная проблема?

А совет помог, от души

Привет, подскажите как лучше сделать. У меня есть компонент для отрисовки графика. Он связан со стором, который хранит информацию о данный, которые надо ренедерит. Этот компонент используется на разных страницах. Проблема сейчас в том, что когда перехожу на с одной страницы на другую, у меня в сторе хранятся данный прошлой страницы. Как мне кажется здесь проблема дизайна. Я это вижу как через пропс компонента передавать объект класс стор. Но кажется, что стор делать классом не очень идея, потому что как минимум не была предложена авторами. Другая идея более тривиальная - перед апдейтом данных чистить стейт.

Немного коряво написал. Сейчас стоит вопрос о том как лучше сделать. Из родительского компонента передавать дочернему через пропс стор (то есть количество сторов будет равно количеству родительских компонент) или использовать один стор, в котором просто надо обновлять стейт

Я же правильно понял, что сначала должен быть вставлен плагин во вью, а потом уже создаваться экземпляр с плагином?

Я же правильно понял, что сначала должен быть вставлен плагин во вью, а потом уже создаваться экземпляр с плагином?

Да

Спасибо

Подскажет ли кто сервис, регистрируясь, и добавляя ссылку CDN с ключем - можно смотреть аналитику посещения и активности пользователей (на сервисе в лк)?

Подскажет ли кто сервис, регистрируясь, и добавляя ссылку CDN с ключем - можно смотреть аналитику посещения и активности пользователей (на сервисе в лк)?

Яндекс метрика?

что за кирилица

Что ему нужно? В компоненте где использую ghAPI(gh просто сокращение) - instance axios-а подключаю через import/export

может по делу что предложешь?

Немного не по теме, а зачем тебе в проекте галп и вебпак?

По наследству

Понял

досталось

я тоже умею читать

http.js: import axios from "axios/index"; export default ghAPI = axios.create({ baseURL: 'http://127.0.0.1:8000', headers: {'X-Requested-With': 'XMLHttpRequest'}, }) Projects.vue: import Project_item from './Project_item.vue' import ghAPI from '../http.js' export default { name: "Projects", components: {Project_item}, data: function () { return { projects: null, } }, comments: { Project_item, }, mounted: () => { ghAPI.get('projects/').then(response => { this.projects = response.data; }).catch(error => { console.log(error); this.errored = true; }).finally(() => (this.loading = false)); } }

Что я делаю не так?

http.js: import axios from "axios/index"; export default ghAPI = axios.create({ baseURL: 'http://127.0.0.1:8000', headers: {'X-Requested-With': 'XMLHttpRequest'}, }) Projects.vue: import Project_item from './Project_item.vue' import ghAPI from '../http.js' export default { name: "Projects", components: {Project_item}, data: function () { return { projects: null, } }, comments: { Project_item, }, mounted: () => { ghAPI.get('projects/').then(response => { this.projects = response.data; }).catch(error => { console.log(error); this.errored = true; }).finally(() => (this.loading = false)); } }

кек

=> убери

не вижу где это лишнее

=> убери

Не могли бы тыкнуть носом, если вам не сложно

http.js: import axios from "axios/index"; export default ghAPI = axios.create({ baseURL: 'http://127.0.0.1:8000', headers: {'X-Requested-With': 'XMLHttpRequest'}, }) Projects.vue: import Project_item from './Project_item.vue' import ghAPI from '../http.js' export default { name: "Projects", components: {Project_item}, data: function () { return { projects: null, } }, comments: { Project_item, }, mounted: () => { ghAPI.get('projects/').then(response => { this.projects = response.data; }).catch(error => { console.log(error); this.errored = true; }).finally(() => (this.loading = false)); } }

mounted не должна быть стрелочной

уже, но всё же это не помогло

Неправильно экспортировал ghAPI..

Я слышал, что хорошо вынести все http-запросы (к API или чему ещё) в отделный модуль. Для этого достаточно просто сделать какой-нибудь services/request.js, с примерно таким содержанием: export const getPosts = axios('/posts') export const ... ? Или что-то хитрее делать надо?)

мой руководитель по практие использует для этих целей vuex, если я правильно понял его код

Типо store.js и там вся работа с запросами и данными

а в request.js только: import axios from "axios/index"; export default axios.create({ headers: {'X-Requested-With': 'XMLHttpRequest'}, })

ребята как вы подлючаете шрифты в Vue?

Я слышал, что хорошо вынести все http-запросы (к API или чему ещё) в отделный модуль. Для этого достаточно просто сделать какой-нибудь services/request.js, с примерно таким содержанием: export const getPosts = axios('/posts') export const ... ? Или что-то хитрее делать надо?)

да, так делают, а в сторе или компонентах просто дергают эти функции. Как минимум, это более тестируемо

мой руководитель по практие использует для этих целей vuex, если я правильно понял его код

И каждый запрос это типа this.$store.dispatch('getPosts')? Вообще, да, я тоже такое видел, только пока не совсем пойму, какую роль тут vuex играет)

Я слышал, что хорошо вынести все http-запросы (к API или чему ещё) в отделный модуль. Для этого достаточно просто сделать какой-нибудь services/request.js, с примерно таким содержанием: export const getPosts = axios('/posts') export const ... ? Или что-то хитрее делать надо?)

Да так правильно

всем привет

А писать запросы в компонентах неправильно

Посдкажите плиз

new Vue({ el: '#app', render: h => h(NoteApp), router, store: notesStore, });

А писать запросы в компонентах неправильно

Опа

render: h => h(NoteApp), 0 вот эта строчка что означает. (Я только учусь еще)

ERROR: S client not available

А чо эта

да, так делают, а в сторе или компонентах просто дергают эти функции. Как минимум, это более тестируемо

То есть, мы от vuex в этом случае исользуем только actions, не трогаем mutations и сам глобальный store?

А, напрямую запросы, а не через сервис апишки

То есть, мы от vuex в этом случае исользуем только actions, не трогаем mutations и сам глобальный store?

Нет это тож неправильно

То есть, мы от vuex в этом случае исользуем только actions, не трогаем mutations и сам глобальный store?

не, приплел не то, что надо )

А, напрямую запросы, а не через сервис апишки

+

у меня почему то пишет в тестовом примере [Vue warn]: Failed to mount component: template or render function not defined.

ни кто не подскажет по шрифтам?

Все зависит от размера проекта и команды, как и везде) если у тебя 2 компонента с одним запросом, тебе не нужно выносить Api. А если у тебя десятки модулей внутри vuex и сотни компонентов, то над api тоже, вероятно, парочку абстракций и оно вынесено отдельно.

не, приплел не то, что надо )

Ну как я себе представляю запросы через vuex: this.$store.dispatch('getPosts'), ну а в экшне просто возвращаем промис, который когда резолвится, возвращает json с постами

нет, вот пример компонента: <script> import {mapActions, mapState} from 'vuex'; const statusBgs = { 'success': 'bg-green', 'error': 'bg-red', 'recognition': 'bg-aqua', '': 'bg-yellow' }; const statusIcons = { 'success': 'fa-check', 'error': 'fa-times', 'recognition': 'fa-cog fa-spin', '': 'fa-spinner fa-spin' }; const statusWords = { 'success': 'Обработка завершена', 'error': 'Завершилось с ошибкой', 'recognition': 'Идет обработка', 'uploaded': 'Ждет обработки', '': 'Загрузка данных' }; export default { name: "Status", data: function() { return { isRestarted: false } }, computed: { bgClass: function () { const status = this.image ? this.image.status : null; return status && statusBgs[status] !== undefined ? statusBgs[status] : statusBgs['']; }, iconClass: function () { const status = this.image ? this.image.status : null; return status && statusIcons[status] !== undefined ? statusIcons[status] : statusIcons['']; }, word: function () { const status = this.image ? this.image.status : null; return status && statusWords[status] !== undefined ? statusWords[status] : statusWords['']; }, ...mapState({image: state => state.image}) }, methods: { makeRestart() { this.isRestarted = true; this.restart(); setTimeout(() => this.isRestarted = false, 5000); }, ...mapActions(['restart']) } } </script> А в store.js: ``` Vue.use(Vuex); const processingStatusses = ['uploaded', 'recognition']; const store = new Vuex.Store({ state: { id: null, image: null, ...: null }, mutations: { init(state, id) { state.id = id; }, image(state, data) { state.image = data; }, ....(state, data) { state.... = data; } }, actions: { async init({commit, dispatch}, id) { commit('init', id); await dispatch('load....'); await dispatch('load'); }, async load({state, commit, dispatch}) { try { const res = await request.get(/images/show/${state.id}); commit('image', res.data); if (processingStatusses.indexOf(res.data.status) !== -1) setTimeout(() => dispatch('load'), 1000); } catch (error) { dispatch('error', {message: 'Произошла сетевая ошибка, попробуйте еще раз', error}); } }, async restart({state, dispatch}) { await request.post(/images/restart/${state.id}/); dispatch('load'); },

Реакт в сладость, вью в радость! Бандиты, где при использовании vue-cli 3 теперь можно изменить конфиги вебпака? А то в package.json теперь какой-то "vue-cli-service"...

нет, вот пример компонента: <script> import {mapActions, mapState} from 'vuex'; const statusBgs = { 'success': 'bg-green', 'error': 'bg-red', 'recognition': 'bg-aqua', '': 'bg-yellow' }; const statusIcons = { 'success': 'fa-check', 'error': 'fa-times', 'recognition': 'fa-cog fa-spin', '': 'fa-spinner fa-spin' }; const statusWords = { 'success': 'Обработка завершена', 'error': 'Завершилось с ошибкой', 'recognition': 'Идет обработка', 'uploaded': 'Ждет обработки', '': 'Загрузка данных' }; export default { name: "Status", data: function() { return { isRestarted: false } }, computed: { bgClass: function () { const status = this.image ? this.image.status : null; return status && statusBgs[status] !== undefined ? statusBgs[status] : statusBgs['']; }, iconClass: function () { const status = this.image ? this.image.status : null; return status && statusIcons[status] !== undefined ? statusIcons[status] : statusIcons['']; }, word: function () { const status = this.image ? this.image.status : null; return status && statusWords[status] !== undefined ? statusWords[status] : statusWords['']; }, ...mapState({image: state => state.image}) }, methods: { makeRestart() { this.isRestarted = true; this.restart(); setTimeout(() => this.isRestarted = false, 5000); }, ...mapActions(['restart']) } } </script> А в store.js: ``` Vue.use(Vuex); const processingStatusses = ['uploaded', 'recognition']; const store = new Vuex.Store({ state: { id: null, image: null, ...: null }, mutations: { init(state, id) { state.id = id; }, image(state, data) { state.image = data; }, ....(state, data) { state.... = data; } }, actions: { async init({commit, dispatch}, id) { commit('init', id); await dispatch('load....'); await dispatch('load'); }, async load({state, commit, dispatch}) { try { const res = await request.get(/images/show/${state.id}); commit('image', res.data); if (processingStatusses.indexOf(res.data.status) !== -1) setTimeout(() => dispatch('load'), 1000); } catch (error) { dispatch('error', {message: 'Произошла сетевая ошибка, попробуйте еще раз', error}); } }, async restart({state, dispatch}) { await request.post(/images/restart/${state.id}/); dispatch('load'); },

Да пиздец, чо это за простыня

Сорян

нет, вот пример компонента: <script> import {mapActions, mapState} from 'vuex'; const statusBgs = { 'success': 'bg-green', 'error': 'bg-red', 'recognition': 'bg-aqua', '': 'bg-yellow' }; const statusIcons = { 'success': 'fa-check', 'error': 'fa-times', 'recognition': 'fa-cog fa-spin', '': 'fa-spinner fa-spin' }; const statusWords = { 'success': 'Обработка завершена', 'error': 'Завершилось с ошибкой', 'recognition': 'Идет обработка', 'uploaded': 'Ждет обработки', '': 'Загрузка данных' }; export default { name: "Status", data: function() { return { isRestarted: false } }, computed: { bgClass: function () { const status = this.image ? this.image.status : null; return status && statusBgs[status] !== undefined ? statusBgs[status] : statusBgs['']; }, iconClass: function () { const status = this.image ? this.image.status : null; return status && statusIcons[status] !== undefined ? statusIcons[status] : statusIcons['']; }, word: function () { const status = this.image ? this.image.status : null; return status && statusWords[status] !== undefined ? statusWords[status] : statusWords['']; }, ...mapState({image: state => state.image}) }, methods: { makeRestart() { this.isRestarted = true; this.restart(); setTimeout(() => this.isRestarted = false, 5000); }, ...mapActions(['restart']) } } </script> А в store.js: ``` Vue.use(Vuex); const processingStatusses = ['uploaded', 'recognition']; const store = new Vuex.Store({ state: { id: null, image: null, ...: null }, mutations: { init(state, id) { state.id = id; }, image(state, data) { state.image = data; }, ....(state, data) { state.... = data; } }, actions: { async init({commit, dispatch}, id) { commit('init', id); await dispatch('load....'); await dispatch('load'); }, async load({state, commit, dispatch}) { try { const res = await request.get(/images/show/${state.id}); commit('image', res.data); if (processingStatusses.indexOf(res.data.status) !== -1) setTimeout(() => dispatch('load'), 1000); } catch (error) { dispatch('error', {message: 'Произошла сетевая ошибка, попробуйте еще раз', error}); } }, async restart({state, dispatch}) { await request.post(/images/restart/${state.id}/); dispatch('load'); },

Я вот тоже думаю: конечная цель у меня админка; если на каждую модель будет столько стейтов и геттеров, будет же жесть)

Господа

господин?

Кто юзает MeteorJS?

Я вот тоже думаю: конечная цель у меня админка; если на каждую модель будет столько стейтов и геттеров, будет же жесть)

Не хочу смотреть чо там, но разбивай на модули

ебусь уже второй день с одной проблемкой

ясно

Кто юзает MeteorJS?

?

Не хочу смотреть чо там, но разбивай на модули

Да там ещё ничего нет, вот я на старте не хочу фигни натворить :D

Привет ребят, обожаю VueJS сейчас выбираю бэк энд для нее. Что думаете по поводу meteor ?

Всё ещё на MeteorJS?

Коллеги, посоветуйте админку на vue.js

Коллеги, посоветуйте админку на vue.js

https://github.com/PanJiaChen/vue-element-admin?utm_source=mybridge&utm_medium=blog&utm_campaign=read_more

Реакт в сладость, вью в радость! Бандиты, где при использовании vue-cli 3 теперь можно изменить конфиги вебпака? А то в package.json теперь какой-то "vue-cli-service"...

Уважаемые гуру, будьте любезны подсказать. Перекат на третью версию проходит не очень гладко...

Не хочу смотреть чо там, но разбивай на модули

В итоге, как я в таком случае понял: Будут файлы, соответствующие модулям, например posts.js, users.js, etc примерно такого содержания: export default { getPosts() { return Promise( ~ axios('/posts') ) } } А в сторе vuex их заимпортить и засунуть в actions Я правильно представляю?)

Никто не сталкивался? TypeError: "_http2.default is undefined"

@CanVeeD благодарю!

В итоге, как я в таком случае понял: Будут файлы, соответствующие модулям, например posts.js, users.js, etc примерно такого содержания: export default { getPosts() { return Promise( ~ axios('/posts') ) } } А в сторе vuex их заимпортить и засунуть в actions Я правильно представляю?)

1ое - да 2ое - понятия не имею Я юзаю их у себя в компонентах, другие юзают в экшенах

Третьи еще дет