当前位置: 首页 > 编程笔记 >

Vue 2.X的状态管理vuex记录详解

韦思淼
2023-03-14
本文向大家介绍Vue 2.X的状态管理vuex记录详解,包括了Vue 2.X的状态管理vuex记录详解的使用技巧和注意事项,需要的朋友参考一下

记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪)

vue Method   --->  Actions  ---> Mutions  ---> State (作用于vue)

在Vue2.X中使用vuex的情况:

  1、多个视图依赖于同一状态,  比如验证登陆情况。

  2、来自不同视图的行为需要变更同一状态 ,

  3、不在一个组件树(不是父子组件的关系),组件间频繁的进行数据和状态的传递,更改。 

新建一个mutation-types.js文件,这个文件里面只做了一件事,那就是记录了事件类型,对mutation有个整体的把握。 

store 中的状态是响应式的,在组件中调用 store 中的状态简单到仅需要在计算属性computed中返回即可。触发变化也仅仅是在组件的 methods 中提交 mutations。

action中的函数触发,是在vue的methods中通过   this.$store.dispatch('方法名',参数)

action内部的函数具体写法:只是起了一个承上启下的作用,真正的处理逻辑在mutation中。 

需要注意点就是:store.js里面的配置。(想把{}里面东西提出来,在App中new,屡次不成功。)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对小牛知识库的支持。

 类似资料:
  • 本文向大家介绍详解vue组件化开发-vuex状态管理库,包括了详解vue组件化开发-vuex状态管理库的使用技巧和注意事项,需要的朋友参考一下 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的

  • 本文向大家介绍Vue的Flux框架之Vuex状态管理器,包括了Vue的Flux框架之Vuex状态管理器的使用技巧和注意事项,需要的朋友参考一下 学习vue之前,最重要是弄懂两个概念,一是“what”,要理解vuex是什么;二是“why”,要清楚为什么要用vuex。 Vuex是什么? Vuex 类似 React 里面的 Redux 的状态管理器,用来管理Vue的所有组件状态。 为什么使用Vuex?

  • 本文向大家介绍详解vuex之store拆分即多模块状态管理(modules)篇,包括了详解vuex之store拆分即多模块状态管理(modules)篇的使用技巧和注意事项,需要的朋友参考一下 了解vuex的朋友都知道它是vue用来集中管理状态的容器,如果了解过Reduce的朋友可能看见他时就会非常熟悉,都是用来管理全局的状态的,实现不同组件之间相互的数据访问。这里我们不介绍vuex,主要介绍vue

  • 本文向大家介绍详解Vue2.x-directive的学习笔记,包括了详解Vue2.x-directive的学习笔记的使用技巧和注意事项,需要的朋友参考一下 除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而,有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。

  • 来自服务器的数据以及是否挂起或导致错误 UI状态如切换,警报和错误消息 自定义主题,凭据和本地化 许多其他类型的状态 Redux using ng2-redux Angular Services and RxJS(推荐)

  • 管理应用程序状态是个难题。您需要在多个后端,Web workers和UI组件之间进行协调。 像Redux和Flux这样的模式旨在通过使这种协调更加明确来解决这个问题。在本文中,我将展示如何使用RxJS在几行代码中实现类似的模式。然后我将展示如何使用这种模式来实现一个简单的Angular 2应用。 在谈论架构模式时,我喜欢从描述其核心属性开始。你可以写在餐巾背上的东西。The devil, of c