首页 > 编程学习 > 日常总结5

日常总结5

发布时间:2023/1/25 12:44:54

Vuex最全使用总结(state、mutations、actions、getters、modules模块化)

vuex
vuex顾名思义是一款为vue而生的状态管理工具。
vue本身自带着store模式,其实就是全局注册一个对象,实现数据共享。适合小型数据量少的项目。
vuex适合复杂的单页面应用,涉及到多层次嵌套,多层次组件传值,不同视图对一个状态或者接口的处理。

一、vuex 的五大核心
1.State
2.Getters
3.Mutations
4.Actions
5.Module
vuex 四大辅助函数 mapState 、mapGetters 、 mapMutations 、mapActions

辅助函数如何使用及其原理链接 https://blog.csdn.net/weixin_43648947/article/details/88995357

二、vuex的工作流程
1.客户端操作事件,dispatch调用一个action
2.对应的action处理参数,比如接口,逻辑操作,传值,commit一个type类型
3.mutation接收一个type类型触发对应的函数,修改state值
4.state更改后对应的view视图在render的作用下重新渲染

 

  • 数据:state --> data
  • 获取数据:getters --> computed
  • 更改数据:mutations --> methods
  • getters => 从基本数据派生的数据
    mutations => 提交更改数据的方法,同步!
    actions => 像一个装饰器,包裹mutations,使之可以异步。
    modules => 模块化Vuex

视图通过点击事件,触发mutations中方法,可以更改state中的数据,一旦state数据发生更改,getters把数据反映到视图。

那么actions,可以理解处理异步,而单纯多加的一层。

 

Vuex是通过全局注入store对象,来实现组件间的状态共享。在大型复杂的项目中(多级组件嵌套),

需要实现一个组件更改某个数据,多个组件自动获取更改后的数据进行业务逻辑处理,这时候使用vuex比较合适。

假如只是多个组件间传递数据,使用vuex未免有点大材小用,其实只用使用组件间常用的通信方法即可。

 

 

Vue有五个核心概念,stategettersmutationsactionsmodules

在action中的函数,能不能获取到state中的数据呢?

当然可以。
文档里有说明的,关键词是rootState
这里的rootState是总的state。可以获取任何module state里的数据。

我给个例子吧。
假设有个articles 的module。然后下面有articles state数组。
我在其他module,想要获取articles module的数据的话,这么写。

 

actionSaveCurrentEditTitle ({ commit, rootState }, titledata) {const articles = rootState.articles.articles// 剩下就是随意操作了。
}

本文链接:https://www.ngui.cc/el/2883558.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000