一、介绍
介绍:Vuex公共数据管理工具,将共享的数据保存到vuex中,方便整个程序中任何组件都可以获取和修改vuex中保存的公共数据;
二、使用目的
a.大型项目中:如想要在子组件中使用祖先组件中数据,要么必须一层一层的传递
b.兄弟组件之间直接传递数据,如果兄弟组件之间想要传递数据,就必须借助父组件(使用麻烦)
三、state用于保存修改共享数据的方法
a.导入vue及vuex
b.创建vuex的对象state\mutation\action\getter
c.在祖先组件中添加store的key保存Vuex对象
例如store:store(只要祖先组件中保存了Vuex对象,要么祖先组件和所有的后代组件中就可以使用Vuex中保存的共享数据了)
d.在后代组件中使用的时候,直接通过this.$store.state.msg就可以了
注意点:在vuex中不推荐直接修改共享数据,如果多个组件都修改了共享的数据,那后期数据发生了错误,我们需要调试错误,就需要把每一个修改了共享数据的组件都检查一遍,这样非常低效,非常不利于我们去维护.
四、mutations用户保存修改数据的方法
统一管理公共的方法,需要的触发调用,而不是各自有各自方法不好维护。
在执行mutation中定义方法时候,系统自动给这些方法传递一个state参数,state中就保存了共享的数据
使用方法:
a.在mutation中定义方法:如mAdd(state){ state.count =state.count+1} 或mSub(state){state.count = state.count - 1}
b.在需要用到的组件方法中直接触发,如methods:{add(){this.$store.commit(“mAdd”)}, sub(){this.$store.commit(“mSub”)}}
五、vue中getters属性(缓存数据)
专门用于定义计算属性的相当于computed(属性:将计算缓存,只要不发送变化就不会调用)
使用方法:a.在getters中定义一个方法formart(state){return state.msg + 'www'}
b.使用方法同computed中差不多(原来是{{formate}}),现在是{{this.$store.msg}}
.