Vuex公共数据管理工具使用

本文介绍Vuex作为Vue.js应用程序的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。文章详细阐述了Vuex的组成部分,包括State、Mutations、Actions和Getters等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、介绍

介绍: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}}

.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值