Bidding data from vuex store

Question

I'm having trouble displaying my tasks from the vuex store.How can I show them from the vuex store. I tried to show them with taskList in the return data but it didn't work.Another question how I can make my task properties match those of the calendar, for example I have:
{
   taskId: 'qwerty123',
   taskName: 'myTaskName'
}
and the calendar waits:

{
  Id: 1,
  Subject: 'Explosion of Betelgeuse Star',
  StartTime: new Date (2018, 1, 11, 9, 30) }thanks

Vinitha Devi Murugan · Accepted Answer

Hi UUhl, 
 
Greetings from Syncfusion Support. 
 
We have validated your requirement “Binding data from Vuex store” at our end and we have prepared below sample to load the Scheduler datasource from Vuex store. 
 
https://codesandbox.io/s/vue-store-scheduler-sample-forked-3xcml  
 
Note: We need to map the proper field name in eventSettings to render appointments in scheduler. Please refer below UG for more information. 
 
https://ej2.syncfusion.com/vue/documentation/schedule/appointments/#binding-different-field-names  
 
 
const store = new Vuex.Store({ 
    state: { 
      data: [], 
    }, 
    mutations: { 
      increment(state) { 
        state.data = [ 
          { 
            taskid: 1, 
            taskname: "Explosion of Betelgeuse Star", 
            Location: "Space Centre USA", 
            TaskStartTime: new Date(2018, 3, 5, 9, 30), 
            TaskEndTime: new Date(2018, 3, 6, 11, 0), 
            CategoryColor: "#1aaa55", 
          }, 
          { 
            taskid: 2, 
            taskname: "Thule Air Crash Report", 
            Location: "Newyork City", 
            TaskStartTime: new Date(2018, 3, 7, 12, 0), 
            TaskEndTime: new Date(2018, 3, 7, 14, 0), 
            CategoryColor: "#357cd2", 
          }, 
          { 
            taskid: 3, 
            taskname: "Blue Moon Eclipse", 
            Location: "Space Centre USA", 
            TaskStartTime: new Date(2018, 3, 8, 9, 30), 
            TaskEndTime: new Date(2018, 3, 8, 11, 0), 
            CategoryColor: "#7fa900", 
          }, 
          { 
            taskid: 4, 
            taskname: "Meteor Showers in 2018", 
            Location: "Space Centre USA", 
            TaskStartTime: new Date(2018, 3, 9, 13, 0), 
            TaskEndTime: new Date(2018, 3, 9, 14, 30), 
            CategoryColor: "#ea7a57", 
          }, 
          { 
            taskid: 5, 
            taskidname: "Milky Way as Melting pot", 
            Location: "Space Centre USA", 
            TaskStartTime: new Date(2018, 3, 10, 12, 0), 
            TaskEndTime: new Date(2018, 3, 12, 14, 0), 
            CategoryColor: "#00bdae", 
          }, 
        ]; 
      }, 
    }, 
  }); 
  store.commit("increment"); 
   
  export default Vue.extend({ 
    store: store, 
    data: function () { 
      return { 
        eventSettings: { 
          dataSource: this.$store.state.data, 
          fields: { 
            id: "taskid", 
            subject: { name: "taskname" }, 
            isAllDay: { name: "FullDay" }, 
            location: { name: "Location" }, 
            description: { name: "Comments" }, 
            startTime: { name: "TaskStartTime" }, 
            endTime: { name: "TaskEndTime" }, 
          }, 
        }, 
 
Kindly try the above sample and get back to us if you need any further assistance.  
 
Regards, 
Vinitha

UuhL · Answer

Hi Vinitha, Thanks it worked. Have a geat day!Regards, UuhL

Vengatesh Maniraj · Answer

Hi

UUhl,You are most welcome!!!Have a great day😊Regards,Vengatesh