Question

我正在为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) && 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>中的更改。但是我需要每5秒运行一次addLine（）方法。所以我在如下的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) && 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>

Answer 1

希望您会发现我的回答有用。如果我说对了，您正在尝试更改商店，但是它不起作用？

简短回答

仅当商店价值随addLine更改时才使用方法watch

一些简要说明：

避免从组件中更改状态
避免映射状态，而是使用状态获取器
有一个间隔只是从存储中的值更新模板不是一个好主意。 有一种方法可以在状态机（存储）发生变化时进行计算

PS：我有15分钟的空闲时间，以便我们可以与此配对。

状态未按预期在vuejs中更新

1 个答案:

简短回答

一些简要说明：