Блог

Я динамически добавляю несколько атрибутов к объектам в массиве в хранилище vuex. Я наблюдаю за изменением состояния, и как только оно изменилось, я запускаю метод, который добавит атрибуты по мере необходимости.

 watch: {
      todayMeetings(newMeetingList, oldMeetingList) {
        //alert();
        this.addLine(newMeetingList);
      }
    }

addLine(newMeetingList) {
        var isFirst = true;
        for (var meeting of newMeetingList) {
          var nowTime = new Date();
          var meetingTime = new Date(meeting.meetingTime);

          if ((nowTime.getTime() < meetingTime) amp;amp; isFirst) {
            meeting.isLine = true;
            meeting.isLast = false;
            isFirst = false;
          } else {
            meeting.isLine = false;
            meeting.isLast = false;
          }
        }
        if (isFirst) {
          newMeetingList[newMeetingList.length - 1].isLast = true;
        }

      },
  

Все это работает нормально , и я вижу изменения в </template> . Но мне нужно запускать метод AddLine() каждые 5 секунд. Поэтому я использовал его внутри функции setInterval следующим образом,

 setInterval(function () {
        console.log('Mounted');
        this.addLine(this.storeMeetings);
      }.bind(this), 5000);
  

Я назвал его смонтированным внутри, но он не обновляет хранилище, как я ожидал.
мой полный сценарий выглядит следующим образом,

 <script>
  import { mapState, mapActions, setState } from 'vuex';
  import todayMeetingItem from './todayMeetingItem.vue';
  import todayMeeting from './todayMeeting.vue';
  import { BIcon, BIconCalendar3, BIconChevronLeft, BIconChevronRight } from 'bootstrap-vue';
  export default {
    props: ['selectedPartner'],
    components: {
      todayMeetingItem,
      BIcon,
      BIconCalendar3,
      BIconChevronLeft,
      BIconChevronRight,
    },
    data() {
      return {
        organizationId:'',
        today: new Date(),
        todaymeeting:[],
      }
    },
    methods: {
      createMeetingEmit() {
        this.$emit('createMeetingEmit');
      },
      ...mapActions('meeting', [
        'getTodayMeeting'
      ]),
      deleteMeeting(meeting) {
        this.$emit('meetingWasDelete', meeting);
      },
      addLine(newMeetingList) {
        var isFirst = true;
        for (var meeting of newMeetingList) {
          var nowTime = new Date();
          var meetingTime = new Date(meeting.meetingTime);

          if ((nowTime.getTime() < meetingTime) amp;amp; isFirst) {
            meeting.isLine = true;
            meeting.isLast = false;
            isFirst = false;
          } else {
            meeting.isLine = false;
            meeting.isLast = false;
          }
        }
        if (isFirst) {
          newMeetingList[newMeetingList.length - 1].isLast = true;
        }

        console.log('newMeetingList');
        console.log(newMeetingList);
        this.$store.commit('setTodayMeetings', this.storeMeetings);
        console.log(this.storeMeetings);
        console.log('this.storeMeetings');

      },
    },
    computed: {
      ...mapState({
        storeMeetings: state => state.meeting.todayMeetings
      }),
      ...mapState({
        storeUpcomingMeetings: state => state.meeting.upcomingMeetings
      }),
      ...mapState({
        mettingLoading: state => state.meeting.meetingLoading
      }),
      todayMeetings() {
        return this.storeMeetings
      }
    },
    mounted: function () {

      this.organizationId = JSON.parse(localStorage.getItem('organizationId'));

      this.getTodayMeeting(this.organizationId);

      //this.addLine(this.storeMeetings);

      setInterval(function () {
        console.log('Mounted');
        this.addLine(this.storeMeetings);
      }.bind(this), 5000);

    },
    watch: {
      todayMeetings(newMeetingList, oldMeetingList) {
        //alert();
        this.addLine(newMeetingList);
      }
    }
  }

</script>
  

Я надеюсь, что вы найдете мой ответ полезным. Если я вас правильно понял, вы пытаетесь изменить хранилище, но оно не работает?

Короткий ответ

используйте свой метод addLine только тогда, когда значение хранилища изменяется с watch

Несколько кратких замечаний:

• избегайте изменения состояния компонентов
• избегайте отображения состояния, вместо этого используйте средства получения состояния
• не очень хорошая идея иметь интервал только для обновления шаблона на основе значений из хранилища. Есть способ выполнить вычисление при изменении состояния машины (хранилища)

PS: Я свободен в течение 15 минут, чтобы мы могли выполнить программу сопряжения по этому вопросу.