vuex

  1. 如果想要在子组件中使用祖先组件中的数据,那么就必须一层一层的传递
  2. 兄弟组件之间不能直接传递数据,如果兄弟组件之间想要传递数据,那么就必须借助父组件

解决方案:使用vuex

什么是vuex?

vuex 是 vue配套的 公共数据管理工具,我们可以将共享的数据保存到vuex中,方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据。
把需要多个组件共享的变量全部存储在一个对象里面,将这个对象放在顶层的Vue实例中,让其他组件可以使用。

有什么状态是需要我们在多个组件间共享的呢?
比如用户的登录状态、用户名称、头像、地理位置信息等等。
比如商品的收藏、购物车中的物品等等。
这些状态信息,我们都可以放在统一的地方,对它进行保存和管理,而且它们还是响应式的

单页面的状态管理

State:不用多说,就是我们的状态。(可以当做就是data中的属性)
View:视图层,可以针对State的变化,显示不同的信息。
Actions:这里的Actions主要是用户的各种操作:点击、输入等等,会导致状态的改变。

多页面状态管理

多个页面都依赖同一个状态(一个状态改了,多个界面需要进行更新)
不同界面的Actions都想修改同一个状态(Home.vue需要修改,Profile.vue也需要修改这个状态)。

Vuex背后的基本思想
我们现在要做的就是将共享的状态抽取出来,交给我们的大管家,统一进行管理。
之后,每个页面,按照规定好的规定,进行访问和修改等操作。

在这里插入图片描述
Mutations 同步操作,发送网络请求
Actions 异步操作

使用步骤

1.提取出一个公共的store对象,用于保存在多个组件中共享的状态
2.将store对象放置在new Vue对象中,这样可以保证在所有的组件中都可以使用到
3.在其他组件中使用store对象中保存的状态即可
通过this.$store.state.属性的方式来访问状态
通过this.$store.commit('mutation中方法')来修改状态
注意事项:
我们通过提交mutation的方式,而非直接改变store.state.属性。
这是因为Vuex可以更明确的追踪状态的变化,所以不要直接改变store.state.属性的值。

vuex核心概念

  • State
  • Getters
  • Mutation
  • Action
  • Module

State单一状态树

如果你的状态信息是保存到多个Store对象中的,那么之后的管理和维护等等都会变得特别困难。
所以Vuex也使用了单一状态树来管理应用层级的全部状态。
单一状态树能够让我们最直接的方式找到某个状态的片段,而且在之后的维护和调试过程中,也可以非常方便的管理和维护。

Getters

需要从store中获取一些state变化后的状态。

Getters基本使用
getters:{
	more20stu(state){
		return state.students.filter(s => s.age>20)
	}
}
Getters作为参数
getters:{
	more20stuLength(state,getters){
		return getters.more20stu.length;
	}
}
Getters传递参数

getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数。

moreAgeStu(state){
	return function(age){
		return state.students.filter(s => s.age>age);
	}
}

Mutation

Vuex的store状态的更新唯一方式:提交Mutation。
Mutation主要包括两部分:
1.字符串的事件类型(type)
2.一个回调函数(handler),该回调函数的第一个参数就是state。

Mutation基本使用
mutations:{
	increment(state){	
		state.counter++;
	}
}
methods:{
	add(){
		this.$store.commit('increment');
	}
}
Mutation传递参数

通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数,
参数被称为是mutation的载荷(Payload)

mutations:{
	incrementCount(state,count){	
		state.counter += count;
	}
}
methods:{
	addFive(count){
		this.$store.commit('increment',count);
	}
}
Mutation传递多个参数

以对象的形式传递, 也就是payload是一个对象。

mutations:{
	incrementCount(state,payload){	
		state.counter += payload.count;
	}
}
methods:{
	addFive(){
		this.$store.commit('incrementCount',{count:5});
	}
}
Mutation响应规则

Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新。
我们必须遵守一些Vuex对应的规则:
提前在store中初始化好所需的属性。
当给state中的对象添加新属性时, 使用下面的方式:
方式一: 使用Vue.set(obj, ‘newProp’, 123);
方式二: 用新对象给旧对象重新赋值;

Action

context是什么?
context是和store对象具有相同方法和属性的对象。
也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等。
但是注意, 这里它们并不是同一个对象。
在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch

mutations:{
	incrementCount(state,payload){	
		state.counter += payload.count;
	}
}
actions:{
	increment(context,payload){	
		return new Promise((resolve=>{
			context.commit('incrementCount',payload)
		}))
	}
}
methods:{
	addFive(){
		this.$store.dispath('increment',{count:5}).then(res=>{
			console.log('完成更新');
		});
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值