0

У меня есть два файла

1: Vue компонент

<template>
<details class="microservices">
    <summary><h1>Дата</h1></summary>
    <div class="manifest">
        <div>
            Установите дату
            <div>{{curentTimer}}</div>
        </div>
    </div>
</details>
</template>
<script>
import obj from './methods/index.js' // подключаемый файл
setInterval(obj[1].getTime(this), 1000)
export default {
  props: ['timer'],
  name: 'date',
  data () {
    return {
    }
  },
  computed: {
    curentTimer () {
      // вычисляемое свойство для таймера
    }
  },
  methods: {
    // set
  }
}
</script>
<style lang="scss" scoped>
    @import '../../../../assets/model/index';
</style>

2: Второй файл подключается к компоненте.

let obj = [{
   getDate () {
   return '[(Init)]'
  }
},
  {
    getTime (state) {
     console.log('method[(index)obj]', state)
     // state.commit('setTimer', '!!!!!!!!!')
   }
}]
export default obj

В 1 файле стоит

setInterval(obj[1].getTime(this), 1000)

Значение обновляется каждую секунду.

Мне надо реактивно обновлять значение в 1 файле(vue component) Как оптимально передать данные из дочернего (2 файла) ?

Это делается с помощью $emit $on

// Генерируем событие, возможно с передаваемыми данными

this.$emit('название' [, данные]);

// Слушаем событие

this.$on('название', function(данные) {...});

Примеры в интернете показывают как это сделать через template.

Я хочу что бы у меня значение обновлялось в свойстве компонента и если мне потребуется выводить его в template.

Как такое правильно записать ? Через mutations значение в vuex обновляется. И по идее this.$store.getters.time в computed:{} должно реактивно изменяться в компоненте но не изменяется.

1 ответ 1

0

Для подключения функций из внешнего файла обычно используются mixin (примеси).

mixin очень похожа по структуре на структуру компонента, имеет свойства data, methods, и прочие. При этом, эти свойства дополняют сам компонент, а подключить эту mixin можно в разных компонентах.

Если Вам необходимо использовать vuex, то обратите внимание, что для получения к нему доступа необходимо использовать свойство $store в самом компоненте, а не до его объявления.

Неправильно

import obj from './methods/index.js' // подключаемый файл
setInterval(obj[1].getTime(this), 1000) 
export default {

Правильно

export default {
  created() {
    window.setInterval(obj[1].getTime(this.$store), 1000) 
  }

В примере используется хук created. Этот хук вызывается при создании компонента.

Насчет реактивности мутаций все верно.

Неудобно, что Вы не привели выполняемый код. Возможно, есть еще какие - нибудь неясности в коде.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.