组件之间的通讯：vuex状态管理,state,getters,mutations,actons的简单使用（一）
之前的文章中讲过，组件之间的通讯我们可以用$children、$parent、$refs、props、data。。。
但问题来了，假如项目特别大，组件之间的通讯可能会变得十分复杂。。。
这个时候了我们就用vuex进行组件通讯 。
至于什么是vuex,简单的说就是一个状态管理器，它管理着我们所有想要它管理的状态，这也就意味某一状态一经变化，其他使用到这个状态的其他组件中数据也会变化
还是一如既往的我不安装，vue-cli开发环境
使用vuex先要引入vuex,创建一个vues.Store();
vuex.Store({
state:{},//状态数据集
getters:{},//公共状态数据集
mutations:{},//主要用于改变状态
actions:{} //是可以解决异步问题
})
1）组件中访问状态数据（this.$store.state.状态名），如果你的状态较少，我们可以直接配合vue的计算属性computed使用
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/vue.js">
</script>
<script src="../lib/vuex.js"></script>
</head> <body>
<div id="app">
<ul>
<li v-for="item in unregisteredUsers">{{item.name}}</li>
</ul>
<app-registration></app-registration>
<app-registrations></app-registrations>
</div>
</body> </html>
<script>
const ch1 = {
template: `<div>
<span>这是第一个子组件</span>
<p>---------------------------------</p>
<div class="row" v-for="item in users">
<p>{{item.name}}</p>
<button @click="registerUser(item)">registerUser</button>
</div>
</div>`, // props:{用了vuex就不需要使用props
// registration:Array
// },
computed: {
users() {
return this.$store.state.users.filter(user => {
return !user.registred;
}); } },
methods: {
registerUser(user) {
user.registered = true;
const date = new Date;
this.$store.state.registrations.push({ userId: user.id, name: user.name, date: date.getMonth() + '/' + date.getDay() });
} }
};
const ch2 = {
template: `<div>
<span>这是第2个子组件</span>
<p></p> </div>`,
// props:{
// users:Array
// },
//
}; const store = new Vuex.Store({
state: {
//填充用于管理状态的共享变量
registrations: [],
users: [
{ id: 1, name: 'Max', registered: false },
{ id: 2, name: 'Anna', registered: false },
{ id: 3, name: 'Chris', registered: false },
{ id: 4, name: 'Sven', registered: false }
]
}
}) //Vue.use(Vuex);
var myvue = new Vue({
el: '#app',
store,
computed: {
unregisteredUsers() {
// return this.$store.state.users.filter((user) => {
// return !user.registered;
// });
return this.$store.state.registrations;
} },
components: {
appRegistration: ch1,
appRegistrations: ch2
} });
</script>
2）getters 主要用于对多出使用的数据做集中处理
访问方式：this.$store.getters.状态名;
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/vue.js">
</script>
<script src="../lib/vuex.js"></script>
</head> <body>
<div id="app">
<ul>
<li v-for="item in unregisteredUsers">{{item.name}}</li>
</ul>
<app-registration></app-registration>
<app-registrations></app-registrations>
</div>
</body> </html>
<script>
const ch1 = {
template: `<div>
<span>这是第一个子组件</span>
<p>---------------------------------</p>
<div class="row" v-for="item in users">
<p>{{item.name}}</p>
<button @click="registerUser(item)">registerUser</button>
</div>
</div>`, // props:{用了vuex就不需要使用props
// registration:Array
// },
computed: {
users() {
return this.$store.state.users.filter(user => {
return !user.registred;
});
}
},
methods: {
registerUser(user) {
user.registered = true;
const date = new Date;
this.$store.state.registrations.push({ userId: user.id, name: user.name, date: date.getMonth() + '/' + date.getDay() });
}
}
};
const ch2 = {
template: `<div>
<span>这是第2个子组件</span>
<p>--------没注册的用沪------------</p>
<ul>
<li v-for="item in unregistration">{{item.name}}</li>
</ul>
</div>`,
computed:{
unregistration(){
return this.$store.getters.unregisterdUsers;
}
}
}; const store = new Vuex.Store({
state: {
//填充用于管理状态的共享变量
registrations: [],
users: [
{ id: , name: 'Max', registered: false },
{ id: , name: 'Anna', registered: false },
{ id: , name: 'Chris', registered: false },
{ id: , name: 'Sven', registered: false }
]
},
getters:{
unregisterdUsers(state){
return state.users.filter(user=>{
return !user.registered;
});
},
registeredUser(state){
return state.user.filter(user=>{
return user.registered;
});
},
totalregisteration(state){
return state.registrations.length;
} }
}) //Vue.use(Vuex);
var myvue = new Vue({
el: '#app',
store, computed: {
unregisteredUsers() {
return this.$store.state.users.filter((user) => {
return !user.registered;
});
return this.$store.state.registrations;
} },
components: {
appRegistration: ch1,
appRegistrations: ch2
} });
</script>
3）如果组件想要改变vuex中状态值，我们需要借助于mutations了、
首先组件自己得定义一个方法，使用this.$store.commit({type:'addNum'，n:n,m:m });触发这个方法，其中n、m是参数
然后要在mutations中定义这个addNum方法
mutations:{//mutations中的函数第一个参数是state
addNum(state,ob){
state.count+=ob.n;
}
},
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/vue.js"></script>
<script src="../lib/vuex.js"></script>
</head>
<body>
<p>
mutation的作用就是，是的子组件可以请求 修改store中state的数据
</p> <div id="app">
<p>我是父组件中的实例：{{parentdata}}</p> <first-child></first-child> </div>
</body>
</html>
<script>
//定义一个子组件
const ch1={
template:`
<div>
<p>你可以进行数据操作,改变store中state的数据:{{varity}}</p> <button @click="add(varity)"> 点击试试</button>
</div>
`,
computed:{
varity(){
return this.$store.state.count;
}
},
methods:{
add:function(n){//子组件通过其自己的方法，直接commit,触发mutations中的方法进而改变状态
//方式一：
this.$store.commit({
type:'addNum',
n:n
});
//方式e二：
//this.$store.commit('addNum',{n:n});
} }
}; var store=new Vuex.Store({
state:{
count:,
users:[{name:'han',age:},{name:'tom',age:},{name:'jarry',age:}],
},
getters:{ },
mutations:{//mutations中的函数第一个参数是state
addNum(state,ob){
state.count+=ob.n;
}
},
});
var myvue=new Vue({
el:"#app",
store,
components:{
firstChild:ch1,
},
computed:{
parentdata(){
return this.$store.state.count;
}
}
});
</script>
4）actions 用于解决多个函数执行的异步问题 ，
本质上也是改变状态嘛，我们使用mutations貌似就可以改变状态了，但是不能解决异步的问题，居然mutations能改变状态，那我们在他的基础上加点什么东西是不是就能 解决异步的问题呢？没错就是actions,
methods----------------------------------------$store.dispatch------------------------------->actions------------------------------->mutations
[解决异步问题，就是在mutations上多了个ations这个步骤，这样解释只是为了大家更好的接受而已，不一定正确]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../lib/vue.js"></script>
<script src="../lib/vuex.js"></script>
</head>
<body>
<p>关于action：
官方说的是为了解决异步的问题，
因为mutations中可能有多个无方法接口，同步执行会大大的降低效率，因此我们急切需要一种方法，及action</p>
<div id="app">
<first-child></first-child>
</div>
</body>
</html>
<script>
const ch1={
template:`
<div>
<p>这是我的第一个组件</p>
<p> <button @click="adds(num)">通过action进行操作</button>: <span>{{num}}</span></p>
<p> <button @click="add(num)">通过mutations进行操作</button>:<span>{{num}}</span></p>
</div>
`,
methods:{
adds:function(n){
//this.$store.dispatch('addCount',n);\n
this.$store.dispatch({type:'addCount',n:n});
},
add:function(n){
//this.$store.commit('addNum',n);
this.$store.commit({
type:'addNum',
n:n
});
}
},
computed:{
num(){
return this.$store.state.smalldata;
}
}
}; // const ch2={
// template:`
// <div>
// <p>这是我的第二个组件</p>
// <span>{{}}</span>
// </div>
// `,
//
// };
//
const store=new Vuex.Store({
state:{
smalldata:,
},
getters:{},
mutations:{
addNum(state,obj){
state.smalldata+=obj.n;
}
},
actions:{
// addCount(co,n){
// co.commit('addNum',n);
// },
addCount({commit},obj){
commit('addNum',obj);
}
},
});
const myvue=new Vue({
el:'#app',
store,
components:{
firstChild:ch1,
//secondChild:ch2,
}
});
</script>
组件之间的通讯：vuex状态管理,state,getters,mutations,actons的简单使用（一）的更多相关文章
- vuex状态管理,state,getters,mutations,actons的简单使用（一）
之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...
- Vuex 状态管理模式
Vuex 是一个专为 Vue.js 设计的状态管理模式 vuex解决了组件之间同一状态的共享问题.当我们的应用遇到多个组件共享状态时,会需要: 多个组件依赖于同一状态.传参的方法对于多层嵌套的组件将会 ...
- vue项目--vuex状态管理器
本文取之官网和其他文章结合自己的理解用简单化的语言表达.用于自己的笔记记录,也希望能帮到其他小伙伴理解,学习更多的前端知识. Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态 ...
- vue 通信：父子通信、兄弟通信、跨多层通信、vuex状态管理
之前简单做了一次vue通信方法的培训,在此记录一下培训的内容. 关于vue通信,大家最先想到的方法应该是props.ref.$emit.$parent,还有vuex,因为这也是我在项目中最常用到的方法 ...
- vuex 状态管理 通俗理解
解释:集中响应式数据管理,一处修改多处使用,主要应用于大中型项目. 安装: 第一:index.js:(注册store仓库) npm install vuex -D // 下载vuex import V ...
- vuex状态管理
msvue组件间通信时,若需要改变多组件间共用状态的值.通过简单的组件间传值就会遇到问题.如:子组件只能接收但改变不了父组件的值.由此,vuex的出现就是用作各组件间的状态管理. 简单实例:vuex的 ...
- vuex状态管理demo
vuex状态管理主要包含四个概念 mapState,mapMutations,mapGetters,mapActions. 编写vuex文件夹下面的store.js import Vue from ...
- 前端Vue框架-vuex状态管理详解
新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...
- 前端技术之：如何在vuex状态管理action异步调用结束后执行UI中的方法
一.问题的起源 最近在做vue.js项目时,遇到了vuex状态管理action与vue.js方法互相通信.互操作的问题.场景如下图所示: 二.第一种解决方法 例如,我们在页面初始化的时候,需要从服务端 ...
随机推荐
- IOS UI总结
一.UIView常见属性 1.frame 位置和尺寸(以父控件的左上角为原点(0,0)) 2.center 中点(以父控件的左上角为原点(0,0)) 3.bounds 位置和尺寸(以自己的左上角为 ...
- react中为什么要使用immutable
因为在react中,react的生命周期中的setState()之后的shouldComponentUpdate()阶段默认返回true,所以会造成本组件和子组件的多余的render,重新生成virt ...
- JSON 数组的创建方式
procedure TFormDZMD.Button1Click(Sender: TObject); var ja: ISuperObject; begin ja := SA([]); ja.AsAr ...
- L217
China has announced that it will further simplify the approval procedures for the private sector to ...
- 缓存ehcache
应用场景: 当调用一个接口数据时:直连-缓存-数据库-远程调用(类似直连) 代码: // 从缓存 通过身份证号码查询是否存在征信报告 CisReportRoot fromCache = cacheSe ...
- 逆向路由器固件之敏感信息泄露 Part2
之前的文章中详细介绍了各种解包路由器固件的工具.解包之后就获得了固件中的文件.下一步就是分析文件寻找漏洞了.这次分析的目标是Trendnet路由器,分析的漏洞是一个远程获取路由器权限的漏洞. 初步分析 ...
- OpenCV 图像旋转实现
1 旋转矩形 首先建议阅读图像旋转算法原理-旋转矩阵,这篇博客可以让你很好地理解图像中的每一个点是如何进行旋转操作的.其中涉及到了图像原点与笛卡尔坐标原点之间的相互转换以及点旋转的一些公式推导. 这里 ...
- gettimeofday的使用
前言 好像只能在linux平台使用,在windows平台不能使用.... #include <sys/time.h> long cur_tp, cost_tp, tmp_tp; struc ...
- CAN中如何计算波特率并配置波特率
//设置波特率 CAN_InitStructure.CAN_SJW=tsjw; //同步宽度 CAN_InitStructure.CAN_BS1=tbs1; //时间段1 CAN_InitStruct ...
- Photoshop通道抠出散乱的儿童头发
抠图之前仔细分析是必不可少的.要了解清楚需要抠取部分的构成,然后选择最快捷的方法.教程素材图片人物头发色调比较单一,背景色也比较单一,用通道抠图是非常快捷的. 最终效果1 最终效果2 原图 一.复制图 ...