vue2（7）之vuex使用/state状态//mutations修改数据/getters/模块化module/获取模块内的数据state&getters与方法

已于 2024-05-07 11:39:18 修改
阅读量1.3k 收藏 10
点赞数 36
分类专栏： vue2和vue3学习 文章标签： vue.js 开发语言 javascript
于 2024-05-06 17:47:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_66318904/article/details/138214373
版权

vue2

一、Vuex概述

目标：明确Vuex是什么，应用场景以及优势

1.是什么

Vuex 是一个 Vue 的 状态管理工具，状态就是数据。

大白话：Vuex 是一个插件，可以帮我们管理 Vue 通用的数据 (多组件共享的数据) 。例如：购物车数据 / 个人信息数

2.使用场景

  • 某个状态 在 很多个组件 来使用 (个人信息)

  • 多个组件 共同维护 一份数据 (购物车)

在这里插入图片描述

3.优势

  • 共同维护一份数据，数据集中化管理
  • 响应式变化
  • 操作简洁 (vuex提供了一些辅助函数)

4.注意：

官方原文：

  • 不是所有的场景都适用于vuex，只有在必要的时候才使用vuex
  • 使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度 （数据的操作更便捷，数据的流动更清晰）

Vuex就像《近视眼镜》, 你自然会知道什么时候需要用它~

二、需求: 多组件共享数

了解本专栏 订阅专栏 解锁全文 超级会员免费看
章小絮
关注
  • 36
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
Vue 学习2 - 核心概念State
qq_41302594的博客
04-07 282
本文教程来自官网：https://vuex.vuejs.org/zh/ State 单一状态树 Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。这次它便作为一个 “唯一数据源” 而存在。这也意味着，每个应用仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地获取整个当前应用的快照。 在 Vue 组件中获得 Vuex 状态...
vuex模块获取数据及方法
weixin_61185298的博客
10-25 9918
为了减轻store的负担，产生模块（module），每个模块独立，可复用。
Vuex在vue2中的使用
最新发布
m0_60477336的博客
06-13 164
在 Vue 2 中，Vuex 是一个流行的状态管理模式和库。用于在 Vue.js 应用程序中管理组件之间的共享状态。Vuex ： 专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式管理（读/写）,是组件间通信方式，适用于。
Vue02 state与mapState
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
11-22 3899
！！！ 这个例子可以先忽略mutations 初始化一个state const store = new Vuex.Store({ state: { name: "old name", age: 18, sex: "女", }, mutations: { changName(state) { ...
Vue2(状态管理Vuex)
passerby的博客
08-28 1278
送大家一句话：不是井里没有水，而是挖的不够深。
vue2获取访问vuex分模块的数据
11-15 2702
1、传统方法 this.$store.state['模块名']['属性名'] 2、mapState方法： import { mapState } from 'vuex' computed: { // ... ...mapState({ list: state => state.city.list }) } 触发其他模块的action 1、 this.$store.dispatch('模块名/属性名', opts) ...
vuex模块化demo
08-26
总结，Vuex 模块化是大型 Vue 应用中管理状态的有效手段，通过划分模块，可以更好地组织状态管理代码，同时提高代码的可维护性和可扩展性。结合其他配置文件，如 `vue.config.js` 和 `babel.config.js`，可以定制...
深入理解Vuex 模块化(module)
12-11
为了解决这个问题，Vuex允许我们将store分割成模块（module），每个module有自己的state，mutation，action，getter，甚至还可以往下嵌套模块，下面我们看一个典型的模块化例子 const moduleA = { state: {....}, ...
VUE---store中引入多modules/*.js 文件
07-07
在Vuex中，一个store可以被划分为多个模块，每个模块拥有自己的state、mutations、actions、getters等。这样做可以将不同的业务逻辑分离，使得代码结构更加清晰，便于团队协作和代码复用。 创建一个模块化的Vuex ...
详解Vuex下Store的模块化拆分实践
10-16
此时，Vuex的模块化拆分就显得尤为重要，它允许我们将Store拆分为多个独立的模块，每个模块拥有自己的state、mutations、actions和getters，从而提高代码的可读性和可维护性。 首先，要实现Vuex的模块化拆分，我们...
通过一个简单的例子学会vuex与模块化
08-28
每个模块都有自己的状态、actions、getters和mutations，实现了模块化存储。 5. `mutation-type.js`：定义了mutation的常量，这样可以避免在代码中硬编码字符串，提高可读性和维护性。例如，`CHANGE_COUNT`常量被...
VUE2速成-4（状态管理）
beeworkshop的博客
05-16 869
文章目录一、Vue状态管理1. 安装2. vuex的引用3. 什么是store4. 在组件中读取store对象5. 将store定义分离到独立的文件中6. 各组件状态同步更新（观察者模式）二、Vuex的核心概念1. 使用mapState读取状态值2. mutations改变状态3. 为mutations中的方法传递其他参数4. actions与异步操作5. Module的使用 一、Vue状态管理 如果有多个状态值需要在多个组件中传递，传递组件的层级可能还比较深，这时借助于props和自定义事件$emit来
Vue状态管理Vuex里面的变量修改
spring_007_999的博客
04-08 548
vuex状态管理用户信息
Vuex从了解到实际运用（二），获取vuex中的全局状态（state，getters）
weixin_45745641的博客
08-18 1680
上篇文章给大家讲了什么是Vuex以及Vuex的核心特点，这篇文章就带大家了解实际项目中如何使用Vuex。如下图，App.vue中我们引用了两个子组件。然后我们在store中定义一个数据，让两个组件都能访问到import {state : {name : "张三" , age : "18" } , {name : "李四" , age : "17" } , {name : "王五" , age : "20" } , ] } , mutations : {} })...
Vuex的基本概念，和Vuex中的 state，getters，mutations
最爱喝怡宝的博客
12-21 657
1.基本概念 Vuex 是一个专为 Vue.js 应用程序开发的(数据的)状态管理模式。 Vuex采用“集中式存储管理”方式去管理数据，把 这些数据 应用到 所有组件上 ！！！ vuex就是仓库---数据仓库--这个数据仓库里的所有的数据，是为组件来使用的！为组件来服务的！ vuex 只 做 “数据” 的维护！！ 对vuex仓库中数据的处理，我们都放在“模型”里面。在vuex这个仓库 store 里面。 2.vuex核心概念 state 存储数据 getters 获取数据的方式 ...
vue2&3更简单实用的状态管理--pinia || 二、state相关的一切
weixin_43776550的博客
12-01 518
如果您使用的是vue2，那么state必须遵循的规则是：必须是普通类型，也就是类似vue中的data，并且在添加新属性时需要使用Vue.set()。
vuex module
小小程序猿洋的博客
06-06 880
Vuex学习(二)--模块modules及获取根部数据或方法 2018年11月29日 16:28 1.使用modules的目的： 由于使用单一的状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂，store对象就会变得非常臃肿；为了解决这个问题，Vuex允许我们将store分隔成模块（module），每个模块拥有自己的state，mutation，action，getter...
【Vuex】Vue中使用Vuex获取多个state状态的4种写法
weixin_44100002的博客
10-09 513
Vue中使用Vuex获取多个state状态的4种写法
Vue2|浅学一下VueX吧（state,getters,mutations,actions,modules)
weixin_62395055的博客
03-03 1202
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,其实通俗一点来讲可以理解成放公共变量的地方，你可以在这里放各个组件之间用到的变量，不用传来传去，你可能会想，我自己拿一个组件专门放公共变量挂到Vue的prototype上面去不就行了，也行，但是不是响应式的，要是你说写一个响应式的也不是不行，那也行，那你挺牛。 官网上扒拉下来这张图 import { createStore } from 'vuex' export default createStore({ state: {
vuex modules
08-25
在Vuex中，modules可以用来将store分割为多个模块，每个模块可以拥有自己的state、mutation、action和getter。你可以使用store.registerModule方法来注册模块，例如： ``` // 注册模块 `myModule` store.registerModule('myModule', { // ... }) // 注册嵌套模块 `nested/myModule` store.registerModule(['nested', 'myModule'], { // ... }) ``` 通过将store分割为模块，可以解决当应用变得非常复杂时store对象变得臃肿的问题。每个模块都可以有自己的状态、变化、行为和获取器，甚至可以包含嵌套子模块。例如： ``` const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) ``` 通过模块化的方式组织store，可以更好地管理和组织复杂的应用程序。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vuex深入学习 ---- Module](https://blog.csdn.net/qq_42731879/article/details/82766065)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [深入理解vuex2.0 之 modules](https://download.csdn.net/download/weixin_38736721/12769097)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

章小絮

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值