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
}

汇总起来新增讯息的部分就会是下图这样

Demo
github