iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >详解Vuex的属性和作用
  • 804
分享到

详解Vuex的属性和作用

2024-04-02 19:04:59 804人浏览 独家记忆
摘要

目录Vuex是什么?Vuex的5个属性vuex 的 State 特性是? vuex 的 Getter 特性是? vuex 的 mauation 特性是? vuex 的 action

Vuex是什么?

VueX是一个专门为 vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。

vuex 可以理解为一种开发模式或框架。比如 PHP 有 thinkphp ,java 有 spring 等。

通过状态(数据源) 集中管理驱动组件的变化(好比 spring 的 ioc 容器对 bean 进行集中管理)。

Vuex有五个核心概念,state, getters, mutations, actions, modules

应用级的状态集中放在 store 中; 改变状态的方式是提交 mutations ,这是个同步的事物; 异步逻辑 应该封装在 action 中。

Cuex借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是,Vuex 是专门为 Vue.js 设计的状态管理库,以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

状态管理: 简单理解就是统一管理和维护各个vue组件的可变化状态(你可以理解成vue组件里的某些data)

Vuex的5个属性

  • state:单一状态树,用一个对象就包含了全部的应用层级状态。
  • getters:就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
  • mutations:每个mutation都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。
  • action:action 类似于mutation,不同在于:action 提交的是mutation,而不是直接变更状态;action可以包含任意异步操作。
  • modules:模块化vuex,每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

vuex 的 State 特性是?

1 、Vuex 就是一个仓库,仓库里面放了很多对象。其中 state 就是数据源存放地,对应于与一般 Vue 对象 里面的 data。

2 、state 里面存放的数据是响应式的,Vue 组件从 store 中读取数据,若是 store 中的数据发生改变,依赖 这个数据的组件也会发生更新。

3 、它通过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性中。

vuex 的 Getter 特性是?

1 、getters 可以对 State 进行计算操作,它就是 Store 的计算属性

2 、 虽然在组件内也可以做计算属性,但是 getters 可以在多组件之间复用

3 、 如果一个状态只在一个组件内使用,是可以不用 getters

vuex 的 mauation 特性是?

1、mutation是一个对象包含多个直接更新state的方法(回调函数)

2、只能包含同步的代码, 不能写异步代码

vuex 的 action 特性是?

1 、action 类似于 mutation ,不同在于:

2 、action 提交的是 mutation ,而不是直接变更状态。

3 、action 可以包含任意异步操作

什么情况下应该使用 Vuex?

虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的global event bus就足够您所需了。但是,如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: 详解Vuex的属性和作用

本文链接: https://www.lsjlt.com/news/160920.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 详解Vuex的属性和作用
    目录Vuex是什么?Vuex的5个属性vuex 的 State 特性是? vuex 的 Getter 特性是? vuex 的 mauation 特性是? vuex 的 action ...
    99+
    2022-11-12
  • 详解Vuex的属性
    目录状态管理模式Mutation需遵守Vue的响应规则Vuex是专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预...
    99+
    2022-11-13
    Vuex的属性 Vuex属性
  • Vuex属性和作用的示例分析
    这篇文章给大家分享的是有关Vuex属性和作用的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Vuex是什么?VueX是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化...
    99+
    2023-06-22
  • vuex中的state属性解析
    目录state属性介绍state的使用扩展vuex的State单一状态树在Vue组件中获得 Vuex 状态mapState辅助函数state属性介绍 state属性是Vuex中用于存...
    99+
    2022-11-13
  • jQuery的操作属性详解
    目录一、操作属性1、读取属性值:attr(属性名)2、修改属性值(1)attr(key,value)(2)attr(key,fn)(3)attr({属性名1:属性值,属性名2:属性值...
    99+
    2022-11-12
  • 详解CSS中zoom和overflow:auto属性的作用是什么
    今天就跟大家聊聊有关详解CSS中zoom和overflow:auto属性的作用是什么,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。前言其实在CSS中...
    99+
    2022-10-19
  • 详解Swift中属性的声明与作用
    一、引言 属性将值与类,结构体,枚举进行关联。Swift中的属性分为存储属性和计算属性两种,存储属性用于存储一个值,其只能用于类与结构体,计算属性用于计算一个值,其可以用于类,结构体和枚举。 二、存储属性 ...
    99+
    2022-06-04
    详解 属性 声明
  • vuex中的state属性怎么用
    这篇“vuex中的state属性怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vuex中的state属性怎么用”文章吧...
    99+
    2023-06-30
  • vuex有哪些使用场景和属性
    本篇内容介绍了“vuex有哪些使用场景和属性”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • 关于Vue中的计算属性和监听属性详解
    目录一、computed计算属性(1)计算属性的缓存(2)计算属性的setter二、watch监听属性一、computed计算属性 Vue.js模板内的表达式非常便利,但是设计它们的...
    99+
    2023-05-20
    Vue 计算属性 Vue 监听属性
  • vuex中的5个属性使用方法举例讲解
    目录一,Vuex简介二,Vuex五个核心属性1:state2:getters3:mutations4:actions5:modules三,Vuex使用方法1:安装Vuex:npm i...
    99+
    2023-05-18
    vuex的五个属性 vuex的五个属性及使用方法 vuex的属性有哪些
  • Python函数属性和PyC详解
    目录函数属性自定义属性查看函数对象属性属性和字节码对象PyCodeObject总结函数属性 python中的函数是一种对象,它有属于对象的属性。除此之外,函数还可以自定义自己的属性。...
    99+
    2022-11-12
  • Mybatis中resultMap的Colum和property属性详解
    目录resultMap的Colum和property属性1: resultMap标签2:使用情况2.1 简单查询2.2 一对一2.3 一对多resultMap对column和prop...
    99+
    2022-11-12
  • Vue的方法和属性案例详解
    vue的方法和属性 1.方法 methods 用法1 methods:{ 方法名:function(){}, } 用法2 methods:{ 方法名(){} } 注意 {{}...
    99+
    2022-11-12
  • CSS 视觉属性中的字体属性详解:font-family 和 font-size
    字体在网页设计中起着非常重要的作用,它直接影响到用户对网页内容的阅读和理解。在CSS中,可以通过font-family属性来指定字体的名称或字体族名称,以控制网页中所使用的字体。下面是一个代码示例:p { font-family: Ar...
    99+
    2023-10-21
    CSS属性 视觉属性 字体属性
  • Python中property属性的用处详解
    目录前言限制值使用 @property 的方式代替。动态属性的好处动态显示附:用property代替getter和setter方法总结前言 Python 动态属性的概念可能会被面试问...
    99+
    2022-11-10
  • Vue3 计算属性的用法详解
    目录computed 计算属性说明计算属性使用总结注意上一篇博文说了 vue3 项目的 toRefs 函数和 toRef 函数,今天就稍微总结一下 vue3 的计算属性,其实学过 v...
    99+
    2022-11-13
  • vue3name属性的使用技巧详解
    目录引言使用步骤引言 如果你在 vue3 开发中使用了 <script setup> 语法的话,对于组件的 name 属性,需要做一番额外的处理。 对于 vue@3.2....
    99+
    2022-11-13
  • Vueextends属性的用法示例详解
    目录引言App.vueSon.vueHelloWorld.vue小结引言 最近在看抖音——《小山与 bug》,看到一个很神奇的 Vue 继承组件的方法,后来...
    99+
    2022-11-13
  • 详解javascript中offsetleft属性的用法
    offsetLeft属性是JavaScript中DOM元素的一个属性,用于获取一个元素相对于其父元素的水平偏移量。具体用法如下:1....
    99+
    2023-08-17
    javascript
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作