前言这次发布的项目对我来说是一场革命。记录了第一个GitHub发布项目，记录了刚开始学习vuex的头晕目眩，也记录了对react的热情消退后，再次回头看vue的感受。所以这个项目对我来说非常有趣。麻雀虽小，五脏俱全。在写这个项目之前，我正在试水React。函数式编程+jsx语法深深吸引了我，然后我在react、mmp的世界里畅游，发现找不到岸。越学越觉得反应深刻，越觉得自己知道的太少。后来被redux弄得遍体鳞伤。然后一气之下，把大胡子的react教科书案例写在了vue里。。。我就是想唱一首歌《凉凉》给react的感觉。当然，经过一段时间的沉淀，还要继续搞react。..Text这是一个类似于发表评论的功能。vuex中实现了增删功能。要点是评论每五秒更新一次。项目主要分为4个组件：HelloWorld.vue、comment_input.vue、comment_list.vue、comment.vue。项目效果和布局如下vuex概念说说我心目中vuex的概念，记住四个名词store、state、actions、mutations就可以了。剩下的modules、getters、mapattributes都是从上面的名词派生出来的。了解了以上四点，基本看文档就搞定了。store老板店，顾名思义，就是店铺的意思。他只是代表了整个vuex。他是老大，剩下的三个都是他的弟弟。老大的作用就是把三个小弟带进vue，然后基本就不管这事了，所以store的作用基本就是newvue在main.js的时候注入进去，跟他没关系，剩下的就交给三个弟弟去炫耀了。三个弟弟，各司其职，互不干涉，往来甚密。State再来说说第二种状态，翻译过来就是state。他管理状态，他的存在和其他组件中的数据完全一样。但是数据的作用域只能在本组件内，如果其他组件想要获取其中一个父子props，子父子......emit。如果隔了好几层的元器件来回传递，也不会耗尽。这就是vuex诞生的原因。无论组件数据中写入什么，状态也是如此。你在data中的变量，比方说a，可以直接从this.a中获取。对于声明在状态中的a，只需要写他老板的等级this即可。$store.state。他是最懒惰、最欺负人的人。有老大有副手不行，他只能欺负老四。他开始bb并指挥第四个。actions的作用是告诉他下面的组件的点击事件他已经开始工作了，然后他告诉老四他已经开始工作了。有时候有件小活儿，人家懒得管，让老四去做。这家伙嘴快，还能做异步工作。说到突变，老四是最难的家伙。所有的活儿都让他做，而你要一件一件做完，所以他基本上是同时做的。一个接一个的做着老三吩咐的任务，改数据的事情就落在了肩上。何况老板是店家，看起来很厉害，但是上面还有Vue，所以他们四个都是Vue的打工仔。Vue有那么多儿子，每一个组件都是他的儿子。老板的儿子需要帮助。你们四个能闲着吗？但是如果他想命令vuex工作，他必须使用他父亲给他的命令。Vue告诉每个组件，如果你想让vuex帮忙，只需要使用dispatch命令。所以他们的工作流程是，bossstore，带三个小弟state,actions,mutations给vue打工，注入到vue公司后，就被忽略了，vue组件的两个儿子要用到一个数据，在里面声明在自己的组件里，拿的太远了，就让secondstate来处理吧。如果以后要用到数据，可以直接用this.$store.state.xx。以后，如果你想改变这个数据，你可以使用它。口头调度，告诉老三要做什么，老三懒惰，让老四去做突变。基本的思维过程是这样的，官网也有规范的写法。让我们继续这个项目。Itemcomment_input组件主要是发布和收集信息，获取用户名、内容、时间三个属性，然后存储到vuex的state中。bandUserBtn(){letuserName=this.$refs.inputUserName.value;if(!userName||!this.content){alert("信息不能为空");returnreturn}letcomment={username:userName,content:this.content,dataTime:+newDate()dis"add"More}$essp.这个年龄。,comment)},comment这个组件是每条评论。在comment_list循环的子组件中，将渲染接受的用户名、内容和时间，每5秒更新一次时间`swiftcreated(){this._updateTimeString();this.timer=setInterval(this._updateTimeString,5000)},方法：{_updateTimeString(){letcomment=this.message;让持续时间=(+Date.now()-comment.dataTime)/1000;这。TimesString=duration>60?${math.round(duration/60)}分钟前：${math.round(math.max(duration,1))}Returnthis.TimeString},handleDelecom(inDex){This)一秒前.$store.dispatch("handleDeleteComment",index)}},beforeDestroy(){clearInterval(this.timer);这个。计时器=空；}###vuex项目比较小，所以把所有状态写成一个jsconststate={comments:localStorage["comments"]?JSON.parse(localStorage["comments"]):[],}constactions={addMessage:({commit},comment)=>commit("getComments",comment),handleDeleteComment:({commit},index)=>commit("handleDeleteComment",index)}constmutations={getComments(state,评论){console.log(state.comments)state.comments.push(评论);本地存储。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...[GitHubURL](https://github.com/fang1995meng0714/comment-list)}}项目就这样Happyending，欢迎提问和bug...GitHubURL
