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方法互相通信.互操作的问题.场景如下图所示: 二.第一种解决方法 例如,我们在页面初始化的时候,需要从服务端 ...
随机推荐
- 【从零开始】用node搭建一个jsonp&json服务
目录: 一.介绍 二.node安装 三.webstorm配置node环境 四.代码介绍 五.如何使用 六.自定义域名 七.其他 一.介绍 1.背景 日常工作中,跟后端商定好接口格式后:通常采用 ...
- ReactiveCocoa源码解析(四) Signal中的静态属性静态方法以及面向协议扩展
上篇博客我们聊了Signal的几种状态.Signal与Observer的关联方式以及Signal是如何向关联的Observer发送事件的.本篇博客继续上篇博客的内容,来聊一下Signal类中静态的ne ...
- 【PHP】制作日历
本期本博主将讲述两种利用PHP制作日历的方法,由于PHP日期函数的便捷性,使得我们制作日历这一过程变得相当简单 问题描述: 1.取到当前日期,并着色显示:2.根据当前日期,判断本月有多少天,一号是周几 ...
- powerdesinger（MSSQLSRV2008测试通过）通过Name或comment 导出注释到sql脚本，生成sql的说明备注，包括表注释信息
导出字段信息name注释到sql2008字段的说明 在database -> edit current dbms -> MSSQLSRV2008::Script\Objects\Colum ...
- [转]安装PIL时注册表中找不到python2.7
如果在win7x64安装python2.7的时候选择了all user,则安装PIL的时候会显示找不到python. 解决办法:复制下面的代码到一个.py文件并运行: # # script to re ...
- [图形学] Chp9 三维几何变换--栈处理函数与矩阵管理函数的区别
矩阵管理函数:glLoadIdentity()是把当前活动矩阵设置为单位矩阵. 栈处理函数:glPushMatrix()是将当前活动的变换矩阵复制一份,压入栈顶:glPopMatrix()是破坏当前活 ...
- Java数据类型在实际开发中的应用一
在前边的博文中,我已经介绍了Java核心的容器IO等,现在我来说一下java中的数据类型.在java中,一切东西皆为对象(这句话意思是java中绝大数情况都用对象),极少数不是对象的,也存在与之对应的 ...
- 利用fputcsv导出数据备份数据
今天,分享一个利用fputcsv导出数据备份数据的方法,我也时看到些零零散散的代码,想着拼起来,所以我只提供些思路,以及简单的代码,至于怎么组合能够让它更强大,尽情去探索吧 讲之前先上一段获取数据库里 ...
- 搭建ES6运行环境
当ES5还没有完全普及时,ES6就接踵而来了,2015年6月17日,ECMAScript 6发布正式版本,即ECMAScript 2015,我们也简称它为ES6或ES2015.在发布之后的将近一年内, ...
- 第三章：3.3 post 请求
1. 在 from表单中将 属性 methtod="post‘ 改变成post 2. 访问主页地址:http://localhost:8000/index 3. 以上出现的错误. 查资料发现 ...