Vuex-数据共享

Vuex

1.当前在企业开发中我们遇到了两个问题:

• 1.如果想要在子组件中使用祖先组件中的数据, 那么就必须一层一层的传递(非常麻烦)
• 2.兄弟组件之间不能直接传递数据, 如果兄弟组件之间想要传递数据, 那么就必须借助父组件(非常麻烦)
  解决方案: 使用Vuex

2.什么是Vuex?
vuex 是 Vue 配套的 公共数据管理工具，我们可以将共享的数据保存到 vuex 中，方便整个程序中的任何组件都可以获取和修改vuex中保存的公共数据

【注意点】:

• 必须在引入Vue之后再引入Vuex
• 只有需要共享的数据才放到vuex上, 不需要共享的数据依然放到组件自身的data上
• this.$store是指vuex实例,store就相当于组件中的data，但是它是可以共享的数据
• 3.在祖先组件中添加store的key保存Vuex对象
  只要祖先组件中保存了Vuex对象 , 那么祖先组件和所有的后代组件就可以使用Vuex中保存的共享数据了

image.png

Vuex-修改共享数据

state: 用于保存共享数据,在Vuex中不推荐直接修改共享数据,而是在vuex中定义vuex实例的时候在mutations中进行数据修改，有利于在代码出bug时进行排错，提高效率
在执行mutations中定义的方法的时候, 系统会自动给这些方法传递一个state参数,state中就保存了共享的数据

步骤：
1.在vuex实例的state中声明共享数据
2.通过vuex对象的mutations来定义修改共享数据的方法
3.在组建的 methods中接收通过this.$store.commit("mutation中的方法")来调用修改数据的方法

Vuex的getters

1.什么是Vuex的getters?
Vuex的getters属性就和组件的计算属性一样相当于组件中的computed, 会将数据缓存起来, 只有数据发生变化才会重新计算,getters数据和computed一样，只有数据发生变化才会重新计算

image.png