【Vue学习】认识Vuex

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的四大核心概念

1. state，用于存放数据，通过this.$store.state来访问。
2. getters，用于渲染数据（相当于计算属性），通过this.$store.getters来访问。
3. mutations，定义方法，用于修改数据，通过this.$store.commit('xxx')来调用。
4. actions，存在异步操作的前提下，定义方法提交mutation，通过this.$store.dispatch('xxx')来调用。