组件之间的通讯：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方法互相通信.互操作的问题.场景如下图所示: 二.第一种解决方法 例如,我们在页面初始化的时候,需要从服务端 ...
随机推荐
- vs2012团队连接（Team Foundation Server）连接不上的怎么办？
项目管理的Team Foundation Server有时总是连接不上,报连接有误或没有权限,那怎么解决呢?
- UVALive 6322 最大匹配...
/* *e...大概明白了.首先用最大匹配看看是不是存在符合题意的匹配.然后呢.对枚举找到每个位置符合的字母里最小的那个. *判断是否能构成最大匹配.直到找完最后一个位置输出就好了.. *还是有些不理 ...
- 如何获取选定部分的HTML
其实这个程序很简单,首先是如何获取选定部分的HTML,还记得这段吗: HTMLDoc := WebBrowser1.Document as IHTMLDocument2; SelectRange : ...
- 循环队列 c 实现！！！！
上数据结构课的时候老师让写了一个循环队列子系统. 代码如下: #include<stdio.h> #include<malloc.h> #define MAXLEN 100 # ...
- STL标准库-算法-常用算法
技术在于交流.沟通,本文为博主原创文章转载请注明出处并保持作品的完整性 介绍11种STL标准库的算法,从这11种算法中总结一下算法的基本使用 1.accumulate() 累加 2.for_each( ...
- 给hackrf加上1602LCD以及UART(附带固件编译方法)
代码库(在hackrf原代码库基础上只添了两个文件,改了一个文件): https://github.com/JiaoXianjun/hackrf-UART-1602LCD 目的主要是为了帮助想更改调试 ...
- PHP出现Cannot modify header information问题的解决方法
在C盘的WINDOWS中找到php.ini 这个配置文件,然后查找一项:output_buffering将其值由原来的off改为on,重新启动Apache就ok了.
- iOS 证书 设置指南
点击这里跳转到改链接:http://docs.jpush.cn/pages/viewpage.action?pageId=1343727
- netscope-支持caffe的在线可视化工具-转载
Netscope是个支持prototxt格式描述的神经网络结构的在线可视工具,地址是here,可以用来可视化Caffe结构里prototxt格式的网络结构. Netscope使用起来也非常简单,打开这 ...
- 批量分割视频opencv
前言 视频处理过程中,会用到对等长的视频进行处理,此时要对大视频进行分割. 实现步骤 1.批量读取视频集: 2.视频分割: 测试代码 1.批量读取视频集: /********************* ...