首页 > 其他分享 >Vuex系列之(六)Vuex Devtools

Vuex系列之(六)Vuex Devtools

时间:2024-02-29 20:15:20浏览次数:14  
标签:系列 mutations actions state 组件 Devtools Vuex

Vuex Devtools

由于Vue和Vuex都是由官方团队开发的,Vue的Devtools和Vuex的Devtools是合二为一的

组件页签、Vuex页签、事件页签

事件页签:观察自定义事件和全局事件总线中的事件

Vuex Devtools仅仅捕获mutations中的动作,actions中的动作是不会捕获的

context:actions中的上下文对象,考虑到了所有你可能会用到的数据,都给你了

​ dispatch:可能逻辑比较复杂,一个action处理的话代码太多,可以调用多个action进行分步处理

​ state:可能需要根据目前state中的值做一些判断

​ ...

既然context中给我们了state,可不可以直接在actions中就操作数据,不再往mutations中传了

​ 虽然能够修改成功,但会导致Vuex Devtools不可用,捕获不到数据的改变,因为Vuex Devtools只和mutations打交道。

业务逻辑可不可以直接在组件中写

​ 如果是特别复杂的业务逻辑,写在actions可以增强复用性,不管是哪个组件拿过来就可以用;如果直接写在组件中,代码冗余量太高。

标签:系列,mutations,actions,state,组件,Devtools,Vuex
From: https://www.cnblogs.com/wzzzj/p/18040027

相关文章

  • Vuex系列之(五)求和案例
    求和案例//index.jsimportVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)constactions={ //对于不包含业务逻辑也不进行Ajax请求转发的操作可以不经过actions,直接调用mutations中的方法即可 //jia(context,value){ // console.log('actions被调用了',conte......
  • Vue UI组件库系列之概述
    概述UI组件库:提供了一些如输入框、布局、按钮等在网页UI布局中常用的元素,并将这些元素以组件的形式提供给我们。一般会说UI组件库是基于哪个框架【Vue/React/...】的、PC端/移动端什么项目适合用UI组件库,什么项目不适合?【UI组件库的应用场景】不适合【页面中包含很多定制化、......
  • Vuex系列之(九)模块化和命名空间
    模块化+命名空间Vuex中的高级写法:Vuex的模块化编码把不同分类【业务分类不同,比如订单管理类的和商品管理类的】的mutation放在不同位置模块化编码的最终目标:对actions、mutations、state、getters中的内容进行分类整理1.Vuex模块化编码的步骤根据业务分类划分模块,在store......
  • Vue Router系列之(一)路由
    路由1.SPA应用单页Web应用(singlepagewebapplication,SPA)。整个应用只有一个完整的页面(index.html)。点击页面中的导航链接不会刷新页面,页面不会跳转,只会做页面的局部更新。数据需要通过ajax请求获取。注:多页面应用,多个页面来回跳来跳去2.什么是路由?一个路由(route......
  • Vue CLI 系列之(十九)总结
    总结父组件=》子组件【props】子组件=》父组件【函数类型的props、组件自定义事件】孙组件=》父组件【全局事件总线】在组件中引入库时,顺序是这样的第三方库自己写的组件所有开发人员都要用的样式配置在App中当标签中的属性过多时,可进行改写,改写时通常将原生属性放......
  • Vue CLI 系列之(十八)插槽
    插槽结构在哪【结构的代码在哪个组件】,样式就写在哪【样式就写在哪个组件中】这里的App组件是Category组件的父组件<!--Category组件--><h3>{{title}}分类</h3><!--定义一个插槽,相当于提前挖了个坑--><!--slot标签的作用相当于占位符,用于告诉Vue组件标签的标签体内容......
  • Vue Router系列之(四)嵌套路由
    嵌套(多级)路由展示区中包含了新的导航区和展示区配置路由规则,使用children配置项:routes:[ //routes中直接配置的是一级路由 { path:'/about', component:About, }, { path:'/home', component:Home, children:[//通过children配置子级路由 { path:'n......
  • Vue Router系列之(三)几个注意点
    几个注意点路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹。通过组件的使用方式不同将组件划分为不同的分类:路由组件和一般组件路由组件:靠路由规则匹配出来,由路由器帮我们渲染的组件【我们没有亲自写过这种组件标签】一般组件:我们亲自写的组件标签路由......
  • Vue Router系列之(二)Vue Router的使用步骤
    使用步骤安装vue-router,命令:npmivue-router导入并应用插件//main.jsimportVueRouterfrom'vue-router'Vue.use(VueRouter)创建src/router/index.js,该文件专门用于创建整个应用的路由器//引入VueRouterimportVueRouterfrom'vue-router'//引入About、Home组......
  • Vue Router系列之(八)router-link 标签的replace属性
    <router-link>的replace属性作用:控制路由跳转时操作浏览器历史记录的模式浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史记录,不破坏栈中的任何一条数据,不断的压入数据,replace是替换掉当前栈顶的那一条记录。路由跳转时候默认为push注:浏览器的历史记录实......