前言
這次發表的專案，這對我來說是一場革命。記錄著第一次GitHub釋出專案，記錄著最初學習vuex的頭昏腦脹，也記錄著懷揣對react的一腔熱血後卻步履闌珊後，再次回看vue時那種感覺。所以說這個專案對我很有意思，麻雀雖小，五臟俱全。
在寫這個專案之前，我正在試水react，那種函數語言程式設計+jsx語法深深吸引了我，然後在react的世界裡遊啊遊啊，mmp的，發現找不到岸邊了，越學感覺react越精深，也越感覺自己會的太少，後來更是被redux虐的遍體鱗傷。然後一氣之下把大鬍子的react教材案例用vue寫出來....對react的感覺現在只想唱一首《涼涼》。當然了，等沉澱一段時間後，必繼續搞react。。。
正文
這是一個類似於發表評論的功能，在vuex中實現增刪功能，要點在於評論每五秒更新一下時間。專案主要分為4個元件：HelloWorld.vue、comment_input.vue、comment_list.vue、comment.vue。專案效果及排版如下
vuex概念
講述一下我心中vuex的概念，只記住四個名詞就行了store、state、actions、mutations。剩下的一些modules、getters以及map的屬性都是在上面名詞上繁衍過來的，瞭解上面的四個，基本再看看文件就搞定了
store
老大store，顧名思義商店的意思。他就是代表了整個vuex。他就是老大，剩下三個都是他小弟，老大的作用就是把三個小弟，帶入vue中，然後基本就不管事了，所以store的作用基本就是在main.js中new Vue的時候注入進去，就沒他的事了，剩下就看他們三個小弟秀操作了。三個小弟，他們各司其職互不干擾，又互相聯絡。
state
再說老二state，翻譯過來就是狀態的意思。他就是管理狀態的，他的存在就好比其他元件中的data一模一樣。但是data的範圍只能是在本元件中，要是其他元件想獲取要麼父子props，子父$emit。要是隔了好幾層的元件，來回傳，還不累死啊。也就是vuex誕生的原因。元件data中怎麼寫，state也就怎麼寫。你在data中生命的變數，假如說a吧，可以直接this.a獲取到。同樣在state宣告的a啊話，只需要把他老大那個層級寫上就好了this.$store.state.a就闊以了
actions
再說老三actions，動作的意思。他就是一個最懶的，欺軟怕硬的傢伙，上面有老大、老二幹不過，只能懟老四了，人家交給他的活，他就開始bb指揮老四。actions的作用就是下面元件點選事件的事情告訴他，開始幹活了，然後他就對老四說，開始幹活了，有時候有小活了，人家都懶得搭理直接讓老四幹了。這傢伙嘴快能幹非同步的活。
mutations
說到老四了，最苦逼的傢伙了，活都讓他幹了，活總得幹完一個說一個吧，所以他基本上同步進行的。把老三指揮的活一個一個幹，改變資料的事就落在肩膀上了。
再說到老大了store，感覺很厲害的樣子，但是他頂上還有vue啊，所以他們四個都是給vue的打工仔。vue的兒子多啊，每個元件都是他的兒子。老闆的兒子需要幫忙了。難道你們四個能閒著嗎？但是他想指揮vuex幹活得使用他老爹給他的一個口諭啊。vue給各個元件說，想讓vuex幫忙了，就用dispatch這個命令就行了。
所以他們的幹活流程就是，老大store，帶三個小弟state、actions、mutations給vue打工，把他們注入到vue公司後，就不管他們了，vue的元件兩個兒子都想用一個資料，在自己元件裡宣告，又太遠不好拿了，就讓老二state專門管，以後想用資料了直接this.$store.state.xx,後來又想改這個資料了，就用它老爹的口諭dispatch，告訴老三要幹嘛，但是老三懶啊，就把要乾的讓老四mutations幹了。
基本思路流程就是這麼運作的，寫法上官網也有規範化寫法。下面轉戰到專案中。
專案
comment_input
這個元件主要發表收集資訊，獲取到username、content、time這個三個屬性，然後儲存到vuex的state裡面
bandUserBtn(){
let userName = this.$refs.inputUserName.value;
if (!userName || !this.content) {
alert("資訊不能為空");
return
}
let comment = {
username : userName,
content : this.content,
dataTime : +new Date()
}
this.$store.dispatch("addMessage",comment)
},
comment
這個元件是每條的評論，在comment_list迴圈的子元件，將接受的使用者名稱、內容、時間渲染上，並將時間沒5秒更新一次
` swift
created(){
this._updateTimeString();
this.timer = setInterval(this._updateTimeString,5000)
},
methods:{
_updateTimeString(){
let comment = this.message;
let duration = (+Date.now() - comment.dataTime) / 1000;
this.timeString = duration > 60
? ${Math.round(duration / 60)} 分鐘前
: ${Math.round(Math.max(duration, 1))} 秒前
return this.timeString
},
handleDeleteComment(index){
this.$store.dispatch("handleDeleteComment",index)
}
},
beforeDestroy(){
clearInterval(this.timer);
this.timer = null;
}
### vuex
專案比較小，就將所有狀態寫到一個js裡面了
const state = {
comments:localStorage["comments"]?JSON.parse(localStorage["comments"]):[],}
const actions = {
addMessage:({commit},comment)=>commit("getComments",comment),
handleDeleteComment:({commit},index)=>commit("handleDeleteComment",index)}
const mutations ={
getComments(state,comment){
console.log(state.comments)
state.comments.push(comment);
localStorage.setItem("comments",JSON.stringify(state.comments))
},
handleDeleteComment(state,index){
console.log(index)
state.comments.splice(index,1);
localStorage.setItem("comments",JSON.stringify(state.comments))
}}
專案就這樣愉快的結束了，歡迎提出疑問和bug...
[GitHub網址](https://github.com/fang1995meng0714/comment-list)
}
}
專案就這樣愉快的結束了，歡迎提出疑問和bug...
GitHub網址