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 that you have read and understand our privacy policy and code of conduct.

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