vuex入门案例

roundstones 发布于2019-08-23 11:36 / 2566人阅读

摘要：说到老四了，最苦逼的家伙了，活都让他干了，活总得干完一个说一个吧，所以他基本上同步进行的。

前言

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

GPU云服务器云服务器 python入门案例 javascript入门案例 Vuex vuex cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97189.html

vue中vuex,echarts,地图,ueditor的使用

摘要：获取富文本内容地图我是使用高德地图在全局导入为我申请的也可以自己去申请高德地图官网案例前言今天是个好日子,大家六一快乐;vue-cli生成的template还需要配置axios,vuex,element等插件,该项目中将这些常用插件进行了配置;项目开发中template可以快速复用,也是可以快速上手vue的一个demo; 1.动态效果图 showImg(https://segmen...

Cheriselalala 2019-08-26 11:56 评论0 收藏0
ES6入门到进阶（二）：循环、数组、对象

摘要：优点按需加载可以写中路径也可以动态加以后默认就是严格模式，默认严格模式完参考视频资料经典入门到进阶上一篇：ES6入门到进阶（一）：let、解构赋值、字符串模板、函数一、循环 ES5里面新增一些东西 1.1 arr.forEach()(常用) 1. for for(let i=0; i [{t:aaaa}] let arr = [ ...

JerryZou 2019-08-26 11:47 评论0 收藏0
基于vue-cli的单元测试案例

摘要：的单元测试最近项目开发临近结尾，反思之前做的不足的地方，想着应该引入测试类的做法，于是乎开始学习前端测试之类的文档。本次主要提供可使用，可运行的单元测试代码，不足之处，欢迎指出。 vue-cli的单元测试最近项目开发临近结尾，反思之前做的不足的地方，想着应该引入测试类的做法，于是乎开始学习前端测试之类的文档。因为项目是基于vue-cli的单页面，所以想着在此基础上拓展。测试框架类型...

CoXie 2019-08-26 17:40 评论0 收藏0
Vuex10分钟入门

摘要：它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。写需要的组件创建一个组件，怼下面的内容，你喜欢彬哥哪一点创建一个展示组件我喜欢彬哥打开，删掉没用的东西，直接怼下面的代码，到这里，架子就搭好了。通过本文你将： 1.知道什么是Vuex. 2.知道为什么要用Vuex. 3.能跑一个Vuex的例子。 4.了解相关概念，面试的时候能说出一个所以然 5...

idisfkj 2019-08-23 15:38 评论0 收藏0
超简单入门Vuex小示例

摘要：写在前面本文旨在通过一个简单的例子，练习的几个常用方法，使初学者以最快的速度跑起来一个的示例。生成基于的项目基于脚手架生成一个项目常用命令项目名进入项目目录，使用先试着跑一下。子组件可以修改父组件和自己的数据。写在前面本文旨在通过一个简单的例子，练习vuex的几个常用方法，使初学者以最快的速度跑起来一个vue + vuex的示例。学习vuex需要你知道vue的一些基础知识和用法。...

linkin 2019-08-22 13:52 评论0 收藏0