几分钟搞懂Vuex(State,Mutations,Actions)

文章目录

State
Getters
Mutation
Actions

这是Vuex官方给出的图片，看起来有点不好理解，上详解！！！！
开始介绍之前，我们需要将Vuex挂载到Vue实例上面，这样我们才能在Vue的所有组件中都可以使用这些数据，这里我们store文件夹下面的index.js存放我们的Vuex代码。
记得在入口文件main.js里面导入store对象

State

暂时可以将他看作是data中的属性，也就是我们当前的状态。
state里面的这些属性都会被加入到响应式系统里面，而响应式系统会监听属性的变化，一旦属性发生变化，会通知所有用到这个属性的界面并进行刷新。
但有一个前提，所有的属性都必须先初始化好，如果直接在mutations里面添加一个新的属性，界面是不会显示的。

//Vuex
const store = new Vuex.Store({sate:{count: 0}，mutations:{increament(state){state.count ++},decreament(state){state.count --}}
})//App.vue
<template><div id="app"><p>{{count}}</p><button @click="increment">+1</button><button @ click="decrement">-1</button></div>
</template>
<script>
export default {name:' App', components:{}, computed:{count: function(){//可以通过$this.$store.sate访问Vuex里面state的状态return this. $store.state.count }
},methods:{increment: function ){//通过this.Store.commit(mutations中的方法)来修改状态this. Sstore. commit(' increment')}, decrement: function ){this. Sstore. commit(' decrement')}

Getters

有时候我们需要获取一些state变异后的状态，就需要使用到我们的Getters了，有点类似于我们的computed计算属性

我们想要获取students数组里面年龄大于20的数据，我们可以适应computed属性获取，但是我们想要在多个页面获取变化后的数据，就需要在每一个组件里面都添加一个计算属性，效率极低！！！Getters该出场了！！！！

//Vuex
const store = new Vuex.Store({sate:{students:[{id:110,name:'zhangsan',age:18},{id:111,name:'lisi',age:21},{id:112,name:'wangwu',age:25},]},getters:{//这样我们就获取到了年龄大于20的数据，在需要的组件直接展示即可getmore20:state => return state.students.filter(s => s.age > 20)}
})

getters默认是不能传递参数的，如果我们希望她能传递一个参数，我们只能让getters本身返回另一个函数
我们想要获取年龄大于20的个数

//Vuex
getters:{//1.我们可以直接添加length：{{getmore20.length}}获取getmore20(state){return state.students.filter(s => s.age > 20)}//2.将getters作为一个参数传递getmore20Len(state,getters){return getters.getmore20.length}//3.我们自定义在组件展示的地方传入一个年龄比如<h2>{{getmoreAge(30)}}</h2>//这里我们想要自定义获取一个年龄大于30的数据getmoreAge(state){return function(age){return state.students.filter(s => s.age >= age)}}}

Mutation

在State里面已经大概了解了Mutations是什么，但是还有很多细节部分

Vuex官方明确：store里面state状态更新的唯一方式就是通过提交Mutations
2.mutations主要包含两部分：事件类型和回调函数
mutations里面的方法必须是同步的，异步用actions

mutations:{increament(state){state.count ++},
}
//这里的increament被称为时间类型，其余被称为回调函数，state是回调函数的第一个参数//mutations更新的方式就是上文提到的通过this.$store.commit的方式

当我们需要点击按钮进行数据的+5或者+10 的时候，我们可以自己传入5或者10的参数进行展示。

//App.vue
<button @click="addFive(5)">+5</button>methods:{//1.第一种提交风格，count是一个数字addFive(count){this.$store.commit('addCount',count)}//第二种提交风格，payload是一个对象addFive(count){this.$store.commit({type: 'addCount',count: 5})}
}//Vuex
mutation:{//1.第一种提交风格addCount(state,count){state.counter += count}//第二种提交风格addCount(state,payload){state.counter += payload.count}
}

向students里面再添加一个学生信息，我们在更新数据的时候，我们可能希望携带一些额外的参数（stu），这个参数被称为mutations的载荷（payload）

//App.vue
<button @click="addStudents">+5</button>methods:{addStudents(){const stu = {id:115,name:'kobe',age:40}this.$store.commit('addStu',stu)}
}//Vuex
mutation:{addStu(state,stu){state.students.push(stu)}
}

添加和删除非响应式数据

//App.vue<h2>{{$store.state.info}}</h2><button @click="updateInfo">修改信息</button>methods:{updateInfo() {this.$store.commit('updateInfo')}
}//Vuex
state:{info: {name: '张三',age: 40,height: 180}
}
updateInfo(state) {// state.info.address='湖南'  //无效,做不到响应式Vue.set(state.info, 'address', '湖南')// delete state.info.name   //无效,做不到响应式Vue.delete(state.info, 'height')}

Actions

actions类似于mutations，但是是用来代替muations进行异步操作的

点击按钮之后过一段时间在执行

//Vuexstate :{counter: 1000,
}mutations:{increment(state){state.counter ++}
}
actions:{increament(context){//context:上下文，这里可以理解为store对象setTimeOut(()=>{context.commit('increment')},1000)}
}//App.vue<h2>{{counter}}</h2>
<button @click="increment">异步修改</button>methods:{increment(){this.$store.dispath('increament')//给actions发出一个自定义事件}
}

actions返回的Promise

//Vuexstate :{counter: 1000,
}mutations:{increment(state){state.counter ++}
}
actions:{increament(context){return new Promise((resolve)=>{setTimeOut(()=>{context.commit('increment')resolve()},1000)}})
}//App.vue<h2>{{counter}}</h2>
<button @click="increment">异步修改</button>methods:{increment(){this.$store.dispath('increament').then(res=>{console.log('完成了更新')})}
}

几分钟搞懂Vuex(State,Mutations,Actions)相关推荐

mysql decimal型转化为float_5分钟搞懂MySQL数据类型之数值型DECIMAL类型
速成指南 5分钟搞懂MySQL数据类型之数值型--DECIMAL类型 DECIMAL类型的语法:DECIMAL[(M[,D])] [UNSIGNED] [ZEROFILL].其中M指定的是数字的总位 ...
一分钟搞懂微调(fine-tuning)和prompt
一分钟搞懂微调fine-tuning和prompt 区别与联系区别联系优缺点微调的优点微调的缺点 prompt的优点 prompt的缺点在CV领域 Reference 大家都是希望让预训 ...
html网页和cgi程序编程,十分钟搞懂什么是CGI
原文:CGI Made Really Easy,在翻译的过程中,我增加了一些我在学习过程中找到的更合适的资料,和自己的一些理解.不能算是严格的翻译文章,应该算是我的看这篇文章的过程的随笔吧. CGI真 ...
python数据分析建模-十分钟搞懂“Python数据分析”
原标题:十分钟搞懂"Python数据分析" 引言:本文重点是用十分钟的时间帮读者建立Python数据分析的逻辑框架.其次,讲解"如何通过Python 函数或代码和统计学知 ...
场内场外交易成本_2分钟搞懂场内场外基金
一天一个金融知识,是成为投资大神的必要条件.今天我们花2分钟搞懂场内基金和场外基金.基金,既可以场内买又可以场外申购,场内场外这两者有什么区别?场内场外场内场外的"场",一般指 ...
看聊天记录都学不会C语言？太菜了吧》（17）5分钟搞懂指针与多重指针
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本系列文章将会以通俗易懂的对话方式进行教学,对话中将涵盖了新 ...
5分钟搞懂用户态,内核态
5分钟搞懂用户态,内核态 1. 什么是用户态,内核态用户态就是提供应用程序运行的空间,为了使应用程序访问到内核管理的资源例如CPU,内存,I/O.内核必须提供一组通用的访问接口,这些接口就叫系统调用 ...
一分钟搞懂JavaME、JavaSE和JavaEE的区别
一分钟搞懂JavaME.JavaSE和JavaEE的区别 JavaME微缩版 JavaSE标准版 JavaEE企业版多数编程语言都有预选编译好的类库以支持各种特定的功能,在Java中,类库以包(pa ...
五分钟搞懂什么是红黑树
五分钟搞懂什么是红黑树(全程图解) 18-09-04 星925 + 关注献花(2) 收藏前戏红黑树,对很多童鞋来说,是既熟悉又陌生.熟悉是因为在校学习期间,准备面试时,这是重点.然后经过多年的 ...

几分钟搞懂Vuex(State,Mutations,Actions)

文章目录

State

Getters

Mutation

Actions

几分钟搞懂Vuex(State,Mutations,Actions)相关推荐

最新文章

热门文章