@vuejs_ru
Vue.js — русскоговорящее сообщество

Общаемся на темы, посвященные Vue.js и опыту его использования. Проблемы. Новости. Решения. См. также: @js_ru, @react_js, @angular_ru, @nuxtjs_ru Вакансии только тут: @javascript_jobs

3988 members

Архив канала @vuejs_ru 12 сентября 2016 г.

10:02:26 ДП
User 19984556
Парни, а как во Vuex правильно вызвать экшн не из шаблона, а из кода?

<script>
  const myFunc = () => {
    setInterval(() => {
      callSomeActionHere({ ???dispatcher??? }, some, data)
    }, 1000)
  }
</script>
10:05:30 ДП
User 58768789
<script>
  const myFunc = () => {
    setInterval(() => {
      this.callSomeActionHere(some, data)//Диспатчер у тебя должен сам просасываться
    }, 1000)
  }
</script>
10:05:59 ДП
User 58768789
Если экшон у тебя лежит в $vm.vuex.actions
10:08:18 ДП
User 58768789
А где это ты так задаешь myFunc?
10:08:31 ДП
User 58768789
Какой у тебя там контекст?
10:09:26 ДП
User 58768789
Я просто в синтаксисе *.vue не очень шарю
10:14:25 ДП
User 19984556
Вооот, контекст во vue-файле для меня пока тоже загадочен.

<script>
  const shared = {}

  const myFunc = () => {
    console.log(this) // => undefined (wha???)
  }

  export default {
    data: () => ({shared})
  }
</script>
10:15:03 ДП
User 19984556
ну и есть ощущение что в данном случае dispatcher всё-таки сам не пробросится...
10:18:34 ДП
User 58768789
import {MyAction} from 'vuex/actions';
const shared = {}

export default {
  methods: {
      myFunc: function (some, data) {
        this.myAction(some, data);
      }
  },
  vuex: {
      actions: {
          myAction: MyAction
      }
  }
  data: () => ({shared})
}
10:19:20 ДП
User 58768789
Пробросится
10:20:45 ДП
User 19984556
о, вот так похоже должен! спасибо)
10:22:45 ДП
User 184398046
относитеть к *.vue
<template lang='jade'></template>
<style lang='scss'>
<script></script>
как
*.js
import template from '!jade!./template.jade'
import style from '!style!scss!./style.sass'

const fn = () => {}

export default {
  // объект для описания Vue инстанса
}
10:24:15 ДП
User 58768789
User 184398046
относитеть к *.vue
<template lang='jade'></template>
<style lang='scss'>
<script></script>
как
*.js
import template from '!jade!./template.jade'
import style from '!style!scss!./style.sass'

const fn = () => {}

export default {
  // объект для описания Vue инстанса
}
Я его сразу отбросил. Для непривыкших будет неочевидно. Проще отделять шаблон от кода.
10:28:35 ДП
User 58768789
Такой маленький чатик. В реакте аж 1003 человека. UPD: уже 1005
10:29:33 ДП
User 60122561
User 58768789
Такой маленький чатик. В реакте аж 1003 человека. UPD: уже 1005
Ну так реакт на мегахайпе, а вуе только у азиатов популярен. Наверняка есть китайский чяттек с 1000+.
10:33:21 ДП
User 184398046
User 60122561
Ну так реакт на мегахайпе, а вуе только у азиатов популярен. Наверняка есть китайский чяттек с 1000+.
Правильно вью
10:33:52 ДП
User 19984556
господа, а как тогда один метод компонента вызвать в другом методе того же компонента?
10:34:17 ДП
User 19984556
this.methodName() не работает. нашёл какой-то способ с эвентами, но он мне не очень нравится
10:34:48 ДП
User 58768789
this.methodName должен работать. Уверен, дело опять в контексте
10:35:56 ДП
User 60122561
User 184398046
Правильно вью
Буду знать. Просто никогда не смотрел видосы еще или такое, где произносили название. :з
10:39:43 ДП
User 58768789
User 19984556
this.methodName() не работает. нашёл какой-то способ с эвентами, но он мне не очень нравится
Будь осторожен со стрелочной нотацией. Она действует наподобие bind(this) и если this еще не определено - то беда. В вуе проще использовать обычные функции. Он на все эвенты прокидывает свой контекст, так что его потерять не так просто
10:40:04 ДП
User 19984556
User 58768789
this.methodName должен работать. Уверен, дело опять в контексте
да, похоже я и вправду что-то делаю не так.

в общем задача моего компонента - по активации загрузить json, а потом выполнять регулярное действие над элементами из него.

я поступил так:

  export default {
    activate: (done) => {
      actionOne()
        .then(startIterating)
        .finally(done)
    }
10:40:18 ДП
User 19984556
User 58768789
Будь осторожен со стрелочной нотацией. Она действует наподобие bind(this) и если this еще не определено - то беда. В вуе проще использовать обычные функции. Он на все эвенты прокидывает свой контекст, так что его потерять не так просто
а ну вот похоже это и есть ответ на мой вопрос...
10:40:34 ДП
User 58768789
Да. Там this еще не определен
10:40:52 ДП
User 19984556
я всё понял... немного переигрался с typescript'ом ))
10:41:09 ДП
User 133584063
Компоненты ну должны работать с данными напрямую
10:41:11 ДП
User 58768789
А точнее - это this объекта, который ты кормишь ву, чтобы создать инстанс. А тебя должен интересовать this инстанса
10:42:11 ДП
User 133584063
Отсылай событие в твой стор что ты хочешь сделать (вызывай action), далее экшен меняет store, это порождает изменние view
10:42:25 ДП
User 133584063
не стоит прям в компоненте делать запросы, парсинг данных и тп
10:42:31 ДП
User 133584063
это попрождает кашу
03:22:28 ПП
User 234491501
Я так понимаю, Vue совсем мертв везде кроме азии?
https://govuejs.com - пуст например.
govuejs.com
Platform for hiring the best Vue.js talents. Find a matching Vue.js job right now.
03:42:09 ПП
User 133584063
Нет не мертв
03:45:10 ПП
User 133584063
Такие списки бесполезны, как по мне. Я на реакте тоже много крутых проектов не смог найти
03:45:57 ПП
User 133584063
Worldofwarships.com
worldofwarships.com
World of Warships - free online warships game battles based on World War 2 and the modern Navy from Wargaming. Read recent WoWS news.
03:46:24 ПП
User 133584063
На первой версии напилен
09:52:32 ПП
User 39182759
а как сейчас модно собирать проект на vue?
09:52:59 ПП
User 39182759
в vueify последний коммит - в июне
09:53:15 ПП
User 63176888
rollup как вариант
10:02:06 ПП
User 104917543
webpack не варик?)
10:09:14 ПП
User 39182759
User 104917543
webpack не варик?)
очень не хочу разворачивать эту кухню
10:40:31 ПП
User 19984556
это всего-то 2 команды: http://vuejs.org/guide/installation.html#CLI
vuejs.org/v2/guide/installation.html
Vue.js - The Progressive JavaScript Framework