简述vuex工作原理_vue能代替jquery吗

Vue (66) 2023-09-14 08:12

Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说简述vuex工作原理_vue能代替jquery吗,希望能够帮助你!!!。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

官网:vuex.vuejs.org

首先要安装:cnpm install vuex -D

vuex官方上提供了一个vuex的工作流程图:

简述vuex工作原理_vue能代替jquery吗_https://bianchenghao6.com/blog_Vue_第1张

vuex提供了两个非常靠谱的方法:mapActions(管理所有的事件)和mapGetters(获取所有的数据)

简述vuex工作原理_vue能代替jquery吗_https://bianchenghao6.com/blog_Vue_第2张

简述vuex工作原理_vue能代替jquery吗_https://bianchenghao6.com/blog_Vue_第3张

给一个按钮绑定点击事件increment,然后通过vuex提供的mapActions方法中来管理这个increment方法,mapActions默认传递进去的是一个数组,监听的事件方法时已字符串的形式传递到数组中去,若有多个类似的方法,用逗号隔开即可。

当我们在app.vue这个组件中点击这个按钮的时候,此时触发了dispatch事件

简述vuex工作原理_vue能代替jquery吗_https://bianchenghao6.com/blog_Vue_第4张

我们可以在main.js同一级建一个store.js用来处理点击按钮后vuex的整个工作的流程。

简述vuex工作原理_vue能代替jquery吗_https://bianchenghao6.com/blog_Vue_第5张

上边点击按钮触发完dispatch事件后会将我们定义的increment方法传递到Actions中,Actions接收完后调用此方法,并且传入一个actions自带的commit对象。最后将commit对象调用后将其传递到下一步mutations中。

简述vuex工作原理_vue能代替jquery吗_https://bianchenghao6.com/blog_Vue_第6张

mutations接收后调用increment方法,此时需要传递一个默认您参数,我们将其定义为state,并且声明一下

简述vuex工作原理_vue能代替jquery吗_https://bianchenghao6.com/blog_Vue_第7张

最后通过mapGetters来渲染经过store.js处理的数据,那么此时count方法也同样是需要我们在store.js中来定义的

简述vuex工作原理_vue能代替jquery吗_https://bianchenghao6.com/blog_Vue_第8张

今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

发表回复