1. 关于Vuex
Vuex是一个用于Vue.js应用程序的状态管理库。它提供了一个集中的存储空间,用于管理应用程序中的所有组件的状态,并提供了一些规则,用于保证状态的一致性和可维护性。
Vuex主要是用来解决组件间传值问题的,因为组件间的跨级或者同级数据传递都比较困难,因此可以借助Vuex实现数据传递。
store文件夹中的index.js专门用来存放vuex相关文件。
需要在main.js文件中引入vuex
2. 使用Vuex实现数据共享
效果
Vuex中的getters配置项相当于计算属性,可以对state中的数据进行计算
效果
3. 计算属性传参的方式
4. 修改Vuex中数据的方式
唯一的方案是提交mutations
去修改vuex中的数据
效果
每点击一次增加按钮,通过vuex共享过来的数据就增加100;在输入框中输入数字,每点击一次减少按钮,共享的数据就会减少输入框中对应的数值。
5. Vuex中的异步操作
mutations中不允许包含任何异步操作,必须是同步的。action
中允许写异步操作,然后在action中提交mutation,因为只有mutation能够用来修改数据。
什么是异步?
比如定时器和axios请求、ajax请求
效果
点击增加按钮1秒后,数字增加输入框中的数值。
6. 总结
Vuex的四大核心概念
- state,用于存放数据,通过
this.$store.state
来访问。 - getters,用于渲染数据(相当于计算属性),通过
this.$store.getters
来访问。 - mutations,定义方法,用于修改数据,通过
this.$store.commit('xxx')
来调用。 - actions,存在异步操作的前提下,定义方法提交mutation,通过
this.$store.dispatch('xxx')
来调用。