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 - state , getters , mutations , actions ， modules 的使用
1, 安装 vue add vuex 2, 安装完之后会自动生成store文件夹,并在main.js中自动引用 store/index.js 3,在store文件夹下的index.js中定义 ...
- 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 驱动应用的数据源 ...
- vue项目--vuex状态管理器
本文取之官网和其他文章结合自己的理解用简单化的语言表达.用于自己的笔记记录,也希望能帮到其他小伙伴理解,学习更多的前端知识. Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态 ...
- vue第十八单元(单向数据流 vuex状态管理)
第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下 ...
- 前端技术之：如何在vuex状态管理action异步调用结束后执行UI中的方法
一.问题的起源 最近在做vue.js项目时,遇到了vuex状态管理action与vue.js方法互相通信.互操作的问题.场景如下图所示: 二.第一种解决方法 例如,我们在页面初始化的时候,需要从服务端 ...
随机推荐
- php下拉菜单选中值在选择之后保留并且显示
<select id="select_platform" name="source" style="height:35px;"> ...
- 执行3小时超长SQL的分析优化过程：从索引遇见IS NULL，到最佳实践
月底高峰期,对一个典型项目抽查分析时,发现了一个超级慢.全表扫描的SQL,语句很简单,AWR中赫然在列,在我统计的截止时间内还没有结束... 使用v$active_session_history进一步 ...
- OJ2236“孤单数”题目报告
题目描述:有2n+1个数,其中有n对数字是成双出现的,有且仅有1个数字只有它自己一个.请你找出这个孤单数. 输入描述: 第一行有且只有一个正整数n(n<=500000) 第二行有2n+1个数ai ...
- Educational Codeforces Round 20.C
C. Maximal GCD time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- win32SDK的hello,world程序
首次用Code::Blocks写Win32GUI程序,关于GDI+的引用摸索了半天.SDK写GUI比较累人,以后还是考虑Qt或者其他方式. 代码: /** *code by lichmama from ...
- springmvc+mybatis 做分页sql 语句
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapperPUBLIC "-// ...
- unslider插件的使用
深入理解unslider.js源码 最近用到了一个挺好用的幻灯片插件,叫做unslider.js,就想看看怎么实现幻灯片功能,就看看源码,顺便自己也学习学习.看完之后收获很多,这里和大家分享一下. u ...
- AugularJS从入门到实践（二）
前 言 前端 AngularJS是为了克服HTML在构建应用上的不足而设计的.(引用百度百科) 本篇学习主要有两个部分: ①[AngularJS 过滤器] ②[AngularJS ...
- 英语曰曰曰No.523
---恢复内容开始--- [一句话新闻] The iPhone's 10th Anniversary:Can Apple Revive Its iPhone Sales ? 1.A look back ...
- IntentService与Service的区别
IntentService是继承并处理异步请求的一个类,在IntentService内有一个工作线程来处理耗时操作,启动IntentService的方式和启动传统的Service一样,同时,当任务执行 ...