DDR爱好者之家

vuex的数据渲染与修改浅析
站长资源 2024/11/23 佚名
33 1538
DDR爱好者之家 Design By 杰米

1.vuex是什么？

用官方的话来说“Vuex 就是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化”。而说的通俗易懂点就是”你想要在不同的组件中使用同一份数据，并且在不同的组件中都可以实时修改它并且这份数据保持同步“。

2.如何使用state中的数据

在你创建好store这个仓库之后，并且在其中添加了相应的数据以及修改它的方法，你就可以在你的组件中使用这个仓库了。比如我们的store是这样最简单的一中：

vuex的数据渲染与修改浅析

在组件中渲染store中的数据

1.通过 this.$store来访问store中的state数据，比如我们在页面中使用一个p标签，在里面渲染store中的state中的数据， <p>{{count}}</p> ，此时这个count应该如何从store中拿出来了？

2.这时我们就需要在这个组件中获取store中的数据了。我们可以直接在本组件的计算属性computed中获取

vuex的数据渲染与修改浅析

3.然后p标签中的count就会渲染出store中的count的值 0 了。

如果你觉得这样写太麻烦了，我们就可以使用vuex的辅助函数mapState

在使用这个辅助函数之前我们需要引入这个辅助函数

import {mapState } from 'vuex'

最后同样是在计算属性中使用它， ...mapState(["count"]) ,这样同样可以达到上面的效果，如果有多个数据，那就直接在这个数组后面添加就行了。列如...mapState(["count","count1",...]) ,需要哪个数据直接拿出来用就可以了

3.如何修改state中的数据

首先我们要知道，官网虽然说修改state中的数据唯一方法就是提交 mutation。但是我们也可以直接修改state中的数据，列如this.$store.state.count = 1 ,这样同样修改了数据，但是最好不要这样，因为这样虽然修改了数据，但是这样可能造成一些问题，因为这样vuex监听不到你的修改过程。

言归正传，如何提交mutation了"Add()">+++</button>,当点击这个按钮时就回触发Add方法，而在Add方法中我们来提交mutation。

在vuex中提交mutation的方式就是使用this.$store.commit()方法，这个方法的参数就是你在store中的mutations中所写的你需要调用的方法。例如上图我们在mutations中创建的add方法，让count自增，所以完整的写法就是在Add方法中:this.$store.commit('add') , 这样当你点击按钮触发组件中的Add方法，这个方法中在通过this.$store.commit('add')方法来修改store中的数据。

如果你觉得这样也麻烦，同样有辅助函数来帮助你，还是一样，先引入这个辅助函数

import { mapMutations} from 'vuex'

然后在本组件的methods中调用它

...mapMutations(['add']), ,然后在按钮点击的时候直接触发add方法就好了，不需要在去触发Add方法了，例如： <button @click="add()">+++</button> ，这样也可以修改vuex中的数据。

总结

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米