前言
这次发表的项目，这对我来说是一场革命。记录着第一次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网址