前言

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