vuex入门案例

前言

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

你可能感兴趣的:(javascript,json,swift,ViewUI)