49_schedule_vuex_module / schedules・devidedSchedulesをvuex化

[hasyrails]

devidedSchedulesをpropsバケツリレーで渡すのを辞めたい →　devidedSchedulesをvuexから呼び出すよう変更する

[hasyrails]

createDevidedSchedulesメソッドをvuexで実装する

createDevidedSchedulesメソッド

createDevidedSchedules() {
      let i = 0;
      let j = 0;
      let k = 0;
      var dateArrays = [];
      var currentDates = [];
      var stopDates = [];
      while(dateArrays.length <= this.schedules.length-1){
        dateArrays.push([]);
      }
      while(i <= this.schedules.length-1){
        currentDates.push(moment(this.schedules[i].start_yyyymmdd));
        i = i + 1;
      }
      while(j <= this.schedules.length-1){
        stopDates.push(moment(this.schedules[j].end_yyyymmdd));
        j = j + 1;
      }

      while(k <= this.schedules.length -1){
        while (currentDates[k] <= stopDates[k]) {
          dateArrays[k].push( moment(currentDates[k]).format('YYYY-MM-DD') )
          currentDates[k] = moment(currentDates[k]).add(1, 'days');
        }
        k = k + 1; 
      }

      var devidedSchedules = [];

      let m = 0;
      let n = 0;
      let idNum = 0;
      while(m <= dateArrays.length -1){
        while(n <= dateArrays[m].length -1){
          idNum = idNum + 1;
          devidedSchedules.push({
            id: idNum,
            title: this.schedules[m].title,
            color: this.schedules[m].color,
            icon: this.schedules[m].icon,
            commit: this.schedules[m].commit,
            yyyymm: moment(dateArrays[m][n]).format('YYYY/MM'),
            year: moment(dateArrays[m][n]).year(),
            month: moment(dateArrays[m][n]).month()+1,
            date: moment(dateArrays[m][n]).date(),
          });
          n = n + 1;
        }
        idNum = idNum +1;
        n = 0;
        m = m + 1;
      }

      this.devidedSchedules =  devidedSchedules;
      console.log(this.devidedSchedules)

[hasyrails]

getCalendarメソッドの中にcreateDevidedSchedulesメソッドを含んでいる

getCalendar() {
      let startDate = this.getStartDate();
      const endDate = this.getEndDate();
      const weekNumber = Math.ceil(endDate.diff(startDate, "days") / 7);

      let calendars = [];

     // ここ　mapActionsで代替できない

      // this.createDevidedSchedules();
      // ...mapActions('schedules',[
      //   'createDevidedSchedulesAction'
      // ]),

      for (let week = 0; week < 1; week++) {
        let weekRow = [];
        for (let day = 0; day < moment(this.currentMonth).daysInMonth(); day++) {
          let scheduleNum = 0;
          for (let k=0; k < this.devidedSchedules.length; k++) {
          //todoListの情報をカレンダーパネルに追加
            if (this.devidedSchedules[k].date === startDate.get("date")&&this.devidedSchedules[k].commit===true) {
              scheduleNum++;
            }
          }

          weekRow.push({
            year: startDate.get("year"),
            month: startDate.get("month")+1,
            date: startDate.get("date"),
            scheduleNum: scheduleNum
          });
          startDate.add(1, "days");
        }
          calendars.push(weekRow);
      }

      return calendars;
      console.log(calendars);

    },

メソッド内容の定義の中でmapActionsは使えない？

getCalendarメソッドもvuex上で定義する必要がある

Vuexのモジュールから他のモジュールのメソッドを呼ぶには

[hasyrails]

moment.jsによる日付のdataをstoreモジュールのstateに移行

// app/javascript/store/modules/date.js

import moment from 'moment'

const date = {
  namespaced: true,
  state: {
    currentDate: moment().format('YYYY/MM'),
    currentMonth: moment().month()+1,
    currentYear: moment().year(),
  },
  mutations: {

  },
  actions: {

  },
  getters: {
  },
}
export default date;

[hasyrails]

他のモジュールのstateをactionで使う

Nuxt.js: storeモジュールから別のstoreモジュールのstateを参照する方法

[hasyrails]

日付周りをstore移行するとエラー

• getStartDateメソッド
• getEndDateメソッド を移行する途中にエラー

vuex化する主目的はdevidedSchedules

• getCalendarメソッド内で使う```createDevidedSchedules````メソッドをdispatchする
• devidedSchedulesをstateとして登録する

上記ができればOK。日付関連のstore化は保留