vuex有哪几种属性?

2023-10-27

一、vuex是什么?

vuex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便整个程序中的任何组件直接获取或修改我们的公共数据。

注意点:只有需要共享的才放到vuex上, 不需要共享的数据依然放到组件自身的data上。

二、什么是“状态管理模式”?

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

四、什么情况下我应该使用 Vuex?

Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择

五、vuex的五个属性

  1. state:state类似容器,包含应用的大部分状态(相当于组件的data数据),state的有几个特点如下:

    • 一个页面只能有一个state
    • 状态存储是响应式的
    • 不能直接改变 state 中的状态,唯一途径显式地提交mutations
  2. mutations:mutations是唯一修改状态的事件回调函数,每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
    注意: 更改 Vuex 的 state 中的状态的唯一方法是提交 mutation。回调函数可以接受两个参数,第一个参数是state状态,第二个参数是 mutation 的载荷就是外面store.commit 传入额外的参数。

  3. getter:你可以理解它是一个状态计算属性,好比组件里面的computed属性,所以getter 的返回值也会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,说白了就是对 store 中的 state 做了一层封装,getter 可以接受两个参数,第一个是状态state,第二个参数是其他getter `

  4. actions:actions 类似于 mutations,不同在于:

    • Action 提交的是 mutations,而不是直接变更状态。

    • Action 可以包含任意异步操作。

  5. module:由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

模块的命名空间
如果把所有的状态都放在一个 store 对象里面,当应用变得非常复杂时,store 对象就有可能变得相当臃肿,维护起来也会变得相当复杂,所以我们可以用模块来划分。比如A module,B module, 在项目中很有可能A module内部的 action、mutation 和 getter 可能和B module内部的 action、mutation 和 getter方法名定义一样,但是这些方法又都是全局的,那么假如提交一次 mutation,A module 和 B module 的 mutation 都会执行,这肯定不行,所以可以用模块的命名空间来区分,可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vuex有哪几种属性? 的相关文章

随机推荐

  • FISCO-BCOS 一、默认配置搭建区块链网络

    一 采用默认配置搭建区块链网络 1 安装openssl ubuntu依赖 sudo apt install y openssl curl 2 创建操作目录 下载安装脚本 cd mkdir p fisco cd fisco 3 搭建单群组4节
  • 面试分享

    在软件测试的面试过程中 经常会出一些测试基础的问题 以此来评估应聘者的基本测试功底和知识储备 下面我就为大家整理了一些软件测试常见面试题及答案 仅供参考 之前的推文也有分享过相关的软件测试面试题 正在准备面试的小伙伴们可以进入本公众号 面试
  • flutter内存泄漏常见分析

    内存泄漏是Flutter中的一个常见问题 以下是一些可能导致内存泄漏的情况和注意事项 未释放控制器 在使用一些控制器 如AnimationController TextEditingController等 时 需要在不需要时及时释放控制器
  • 创建线程的方式打开记事本

    更好的阅读体验 huge color red 更好的阅读体验 更好的阅读体验 今天操作系统课老师讲到进程 提出了一个有趣的小实验 能否以系统调用的方式利用 Windows 创建进程的系统调用函数来打开一个软件 闲着蛋疼的我立马来了兴趣 姑且
  • unity开发VR,没有VR设备解决方式

    文章目录 前言 一 环境搭建 1 普通VR环境搭建 2 虚拟相机搭建 二 模拟相机的操作 总结 前言 开发实例环境为unity2018 4 11 VRTK3 3 0 steamVR1 2 23 当我们身边没有HTC VIVE设备时我们不能去
  • Android Studio中的mavenCentral、jcenter、google仓库

    一 Android Studio中依赖是从哪里得到 是从工程的build gradle里面定义的Maven仓库服务器去下载library的 总的来说 只有两个标准的Android library文件服务器 mavenCentral和jcen
  • AES加密和解密详解

    本文使用的是cyrpto js库 以AES CBC为例 先安装cyrpto js cyrpto js是js专门用来加密和解密用到的一个库 第一步 先确认一下电脑是否有node和npm 输入node version显示 v 版本号就可以下一步
  • RPMB分区介绍

    RPMB Replay Protected Memory Block重放保护内存块 Partition 是 eMMC 中的一个具有安全特性的分区 eMMC 在写入数据到 RPMB 时 会校验数据的合法性 只有指定的 Host 才能够写入 同
  • Java之解压Tar.gz和Gz文件到指定的目录下

    工作中的需求 需要读取指定路径下的压缩文件 然后解压到指定的目录下 引入maven依赖
  • msvcp140.dll丢失的4个解决方法,msvcp140.dll丢失的常见原因

    msvcp140 dll是Windows操作系统中的一个动态链接库文件 由Microsoft Visual C 程序库所提供 它包含了许多C 函数和类的定义 可以为应用程序提供一些基本服务 比如内存管理 文件输入 输出和网络连接等功能 我们
  • phpstorm表单递交post出错get正确的解决方法

    好吧 这是我第二次因为这个问题搞得凌晨才睡觉 这次一定要记录下来 phpstorm版本2016 1 1 问题详细描述 在html写好表单之后以post方式递交给php文件 返回结果在谷歌浏览器是 Automatically populati
  • Allegro如何做镂空丝印操作指导

    Allegro如何做镂空丝印操作指导 在PCB设计丝印的时候 会需要画镂空的丝印 Allegro升级到了172版本的时候 可以画镂空的丝印 如下图 具体操作如下 选择Shape Add Rect命令 Options选择需要画到的层面 比如S
  • nginx文档合集

    1 nginx documentation 2 14个Nginx的核心功能点 建议收藏 3 Nginx之负载均衡模块 ngx http upstream module 途径日暮不赏丶的博客 CSDN博客 4 tomcat redis ses
  • 华为OD机试 - 完美走位(Python)

    完美走位 题目描述 输入一个长度为4的倍数的字符串 字符串中仅包含WASD四个字母 将这个字符串中的连续子串用同等长度的仅包含WASD的字符串替换Q 如果替换后整个字符串中WASD四个字母出现的频数相同 那么我们称替换后的字符串是 完美走位
  • Android Studio 快捷键盘

    Alt 回车 导入包 自动修正 Crtl X 剪贴 删除本行 之前用Eclipse Ctrl D 就是删除 在AndroidStudio 中是复制本行到下一行 找了好久都没找到删除本行快捷键的 汗 Ctrl N 查找类 Ctrl Shift
  • CTO、技术总监、首席架构师的区别

    一 高级程序员 如果你是一个刚刚创业的公司 公司没有专职产品经理和项目经理 你就是公司的产品经理 你如果对你现在的开发员能力不满 那么你只需要的是一个高级程序员 你定义功能 你做计划推进和管理 他可以带1 2个副手把你规划的功能实现了 他是
  • PostgresSQL 用linux命令重启时出错:pg_ctl: server does not shut down

    出错原因 在建一个新的数据库 然后restore好久都没成功 就把服务器直接关掉重启了 然后通过linux去重启数据库就一直不成功 下面是出错信息和解决步骤 用service postgresql restart去重启数据库 总是报以下错误
  • 长/短 链接/轮询 和websocket

    短连接和长连接 短连接 http协议底层基于socket的tcp协议 每次通信都会新建一个TCP连接 即每次请求和响应过程都经历 三次握手 四次挥手 优点 方便管理 缺点 频繁的建立和销毁连接占用资源 长连接 客户端和服务端之间只有一条TC
  • 链表的有序构建和查找

    题目描述 单链表结点的存储结构包含两部分 数据 下一结点指针 默认为空 单链表包含头结点 存储实际数据的结点位置从1开始 现输入一批无序的整数队列 编写程序完成以下要求 1 构建单链表并且把数据按递增顺序插入到链表中 并且统计非空指针发生变
  • vuex有哪几种属性?

    一 vuex是什么 vuex 是 Vue 配套的 公共数据管理工具 它可以把一些共享的数据 保存到 vuex 中 方便整个程序中的任何组件直接获取或修改我们的公共数据 注意点 只有需要共享的才放到vuex上 不需要共享的数据依然放到组件自身