前言
這次發(fā)表的項目，這對我來說是一場革命及塘。記錄著第一次GitHub發(fā)布項目莽使，記錄著最初學習vuex的頭昏腦脹，也記錄著懷揣對react的一腔熱血后卻步履闌珊后笙僚，再次回看vue時那種感覺芳肌。所以說這個項目對我很有意思，麻雀雖小肋层，五臟俱全亿笤。
在寫這個項目之前，我正在試水react栋猖，那種函數(shù)式編程+jsx語法深深吸引了我净薛，然后在react的世界里游啊游啊，mmp的蒲拉，發(fā)現(xiàn)找不到岸邊了肃拜，越學感覺react越精深，也越感覺自己會的太少雌团，后來更是被redux虐的遍體鱗傷燃领。然后一氣之下把大胡子的react教材案例用vue寫出來....對react的感覺現(xiàn)在只想唱一首《涼涼》。當然了锦援，等沉淀一段時間后猛蔽，必繼續(xù)搞react。灵寺。曼库。
正文
這是一個類似于發(fā)表評論的功能，在vuex中實現(xiàn)增刪功能略板，要點在于評論每五秒更新一下時間毁枯。項目主要分為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的時候注入進去月趟，就沒他的事了，剩下就看他們三個小弟秀操作了恢口。三個小弟孝宗，他們各司其職互不干擾，又互相聯(lián)系耕肩。
state
再說老二state因妇，翻譯過來就是狀態(tài)的意思。他就是管理狀態(tài)的猿诸，他的存在就好比其他組件中的data一模一樣婚被。但是data的范圍只能是在本組件中，要是其他組件想獲取要么父子props两芳，子父$emit摔寨。要是隔了好幾層的組件，來回傳怖辆，還不累死啊是复。也就是vuex誕生的原因。組件data中怎么寫竖螃，state也就怎么寫淑廊。你在data中生命的變量，假如說a吧特咆，可以直接this.a獲取到季惩。同樣在state聲明的a啊話录粱，只需要把他老大那個層級寫上就好了this.$store.state.a就闊以了
actions
再說老三actions，動作的意思画拾。他就是一個最懶的啥繁，欺軟怕硬的家伙，上面有老大青抛、老二干不過旗闽，只能懟老四了，人家交給他的活蜜另，他就開始bb指揮老四适室。actions的作用就是下面組件點擊事件的事情告訴他，開始干活了举瑰，然后他就對老四說捣辆，開始干活了，有時候有小活了此迅，人家都懶得搭理直接讓老四干了汽畴。這家伙嘴快能干異步的活。
mutations
說到老四了邮屁，最苦逼的家伙了整袁，活都讓他干了，活總得干完一個說一個吧佑吝，所以他基本上同步進行的坐昙。把老三指揮的活一個一個干，改變數(shù)據(jù)的事就落在肩膀上了芋忿。
再說到老大了store炸客，感覺很厲害的樣子，但是他頂上還有vue啊戈钢，所以他們四個都是給vue的打工仔痹仙。vue的兒子多啊，每個組件都是他的兒子殉了。老板的兒子需要幫忙了开仰。難道你們四個能閑著嗎？但是他想指揮vuex干活得使用他老爹給他的一個口諭啊薪铜。vue給各個組件說众弓，想讓vuex幫忙了，就用dispatch這個命令就行了隔箍。
所以他們的干活流程就是谓娃，老大store，帶三個小弟state蜒滩、actions滨达、mutations給vue打工奶稠，把他們注入到vue公司后，就不管他們了捡遍，vue的組件兩個兒子都想用一個數(shù)據(jù)锌订，在自己組件里聲明，又太遠不好拿了画株，就讓老二state專門管瀑志，以后想用數(shù)據(jù)了直接this.$store.state.xx,后來又想改這個數(shù)據(jù)了，就用它老爹的口諭dispatch污秆，告訴老三要干嘛，但是老三懶啊昧甘，就把要干的讓老四mutations干了良拼。
基本思路流程就是這么運作的，寫法上官網也有規(guī)范化寫法充边。下面轉戰(zhàn)到項目中庸推。
項目
comment_input
這個組件主要發(fā)表收集信息，獲取到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循環(huán)的子組件际乘，將接受的用戶名、內容漂佩、時間渲染上脖含，并將時間沒5秒更新一次
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
項目比較小，就將所有狀態(tài)寫到一個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網址
