iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
自我挑戰組

Vue.js系列 第 28

Vuex實作

昨天介紹了Vuex是什麼,也知道了它的流程,今天當然也要來實作一下Vuex啦~這個實作會沿用第26天vue-router的專案來實作Vuex的Actions, Mutations和State,也就是要把在首頁中訊息欄的那部分完成

首先是state,它是存放狀態的地方,也就是之前寫在data區塊的資料,在這個專案中存放的資料有每個訊息的id,留言者的姓名、內容和留言的日期以及是否有標記星號

接下來
從Views中會看到一個Home.vue檔,

handleAddConfirm() {
   if (!this.inputMessage.name || !this.inputMessage.content) {
     alert("Please enter your name and message in full!");
     return;
   }
   this.inputMessage.date = this.DATE;
   this.inputMessage.id = shortID.generate({ salts: 5, interval: 1000 });
   this.addMessage(this.inputMessage);
   this.toggleShowAddDialog();
   this.initMessages();
   this.clearInput();
 }

在這個檔案中的handleAddConfirm首先是要去判斷留言者的姓名和訊息是否為空值,不是空值的話,就會到inputMessage.date = thie.DATE這裡它會把傳送訊息的日期放進去,把ID產生出來,然後到addMessage這裡它就會去呼叫actions這裡的addMessage function

export const addMessage = ({ commit }, data) =>{
    commit('ADD_MESSAGE', data)
}

這裡他要帶一個data,這個data是要回傳到Home.vue檔中的inputMessage(this.addMessage(this.inputMessage);),回傳的資料就是使用者在彈跳時窗中輸入的姓名和訊息的資料

然後再到actions中的addMessage,他會透過commit把剛剛的data傳給mutations的ADD_MESSAGE

export const addMessage = ({ commit }, data) =>{
    commit('ADD_MESSAGE', data)
}
export const ADD_MESSAGE = (state, data) =>{
    state.messages.push(data)
    LocalStorage.save(state.messages)
}

在mutations這裡他會先push data在messages裡面,也就是把剛剛接到使用者訊息的那包資料丟進去然後去呼叫LocalStorage.save把messages的資料全部儲存起來

最後是getters的部分,在getters這裡的DATE就是接到Home.vue檔中inputMessage.date = thie.DATE的DATE

export const DATE = () => {
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    return months[state.timeNow.month] + ", " + state.timeNow.day
}

匯總起來新增訊息的部分就會是下圖這樣
https://ithelp.ithome.com.tw/upload/images/20210930/20139183Or8pyYorCD.jpg

Demo
github


上一篇
What is Vuex?
下一篇
Vue-cli專案介紹
系列文
Vue.js30

尚未有邦友留言

立即登入留言