Vuex的基本使用

最新推荐文章于 2025-04-13 21:29:43 发布
最新推荐文章于 2025-04-13 21:29:43 发布
阅读量1.3k 收藏
点赞数 56
分类专栏： Vue知识学习及项目开发实践 文章标签： vue.js Vuex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/bjzhang75/article/details/143452172
版权

文章目录

  • 一、Vuex概述
    • 1.是什么
    • 2.使用场景
    • 3.优势
    • 4.注意
  • 二、如何构建vuex多组件共享数据环境
    • 1.创建项目
    • 2.创建三个组件
    • 3.源代码
  • 三、vuex 的使用 - 创建仓库
    • 1.安装 vuex
    • 2.新建 `store/index.js` 专门存放 vuex
    • 3.创建仓库 `store/index.js`
    • 4 在 main.js 中导入挂载到 Vue 实例上
    • 5.测试打印Vuex
  • 四、核心概念 - state 状态
    • 1.目标
    • 2.提供数据
    • 3.使用数据
      • 3.1 通过 store 直接访问
      • 3.2 通过辅助函数 (简化)
  • 五、核心概念-mutations
    • 1.定义mutations
    • 2.格式说明
    • 3.组件中提交 mutations
    • 4. mutations 传参语法
    • 5. 辅助函数- mapMutations
  • 六、核心概念 - actions
    • 1.定义actions
    • 2.组件中通过dispatch调用
    • 3.辅助函数 -mapActions
  • 七、核心概念 - getters
    • 1.定义getters
    • 2.使用getters
      • 2.1原始方式-$store
      • 2.2辅助函数 - mapGetters
  • 八、核心概念 - module
    • 1.目标
    • 2.问题
    • 3.模块定义 - 准备 state
    • 4.获取模块内的state数据
      • 4.1.目标：
      • 4.2.使用模块中的数据
      • 4.3.代码示例
    • 5.获取模块内的getters数据
      • 5.1.目标：
      • 5.2.语法：
      • 5.3.代码演示
    • 6.获取模块内的mutations方法
      • 6.1.目标：
      • 6.2.注意：
      • 6.3.调用方式：
      • 6.4.代码实现
    • 7.获取模块内的actions方法
      • 7.1.目标：
      • 7.2.注意：
      • 7.3.调用语法：
      • 7.4.代码实现
    • 8.Vuex模块化的使用小结
      • 8.1.直接使用
      • 8.2.借助辅助方法使用

一、Vuex概述

官网：https://v3.vuex.vuejs.org/zh/

目标：明确 vuex 是什么，应用场景，优势

1.是什么

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

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

2.使用场景

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

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

3.优势

①共同维护一份数据，数据集中化管理
②响应式变化
③操作简洁 (vuex提供了一些辅助函数)
在这里插入图片描述

4.注意

官方原文：

  • 不是所有的场景都适用于vuex&#
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vuex基本使用
ZHUSHANGLIN的博客
08-12 924
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享使用Vuex管理数据的好处：A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护B.能够高效的实现组件之间的数据共享，提高开发效率C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新。
vuex基本使用流程
m0_75074819的博客
07-27 403
创建store管理所有共享的状态，这个store通常包含state、mutations、actions、getter等部分。第二种提交： （在actions里经过一些异步操作后，提交到mutations中，最后改变state中对应的状态）注：小弟们不需要再安装和启用Vuex插件，因为有他们大哥“罩”着他们。第一种提交：(只涉及state和mutations)2、在store（user.js）里。
vue 入门：vuex
最新发布
永无止境
04-13 220
Vuex 是 Vue.js 的官方状态管理库，用于构建大型、复杂且需要跨组件共享状态的应用。它通过一个全局的 store 来集中管理应用的状态，使得状态管理更加清晰、可维护。//从 store 的 state 中取出 count 属性的值。vuex运行机制，独立于vue组件。在 vue 组件中使用vuex。
Vuex 的基本使用
Mark
12-13 301
目录 1、Vuex 是个啥？ 2、单页面的状态管理 3、Vuex 的安装及使用 4、通过mutation改变state状态 5、Vuex 的几个核心概念 6、项目结构 1、Vuex 是个啥？ 官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue...
VUEX的基本使用
wwr12138333的博客
05-01 207
VUEX的基本使用 （B站视频学习总结） 首先回顾一下组件之间共享数据的方式 父组件向子组件传值： v-bind属性绑定； 子组件向父组件传值： v-on 事件绑定 1.VUEX是什么 vuex是一个专门为vue.js应用程序开发的状态管理模式。可以实现组件之间数据的共享。 （数据就是状态） [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-54QIARbq-1651398500954)(C:\Users\86157\AppData\Roaming\Typora\typora-u
Vue3从入门到实战 vuex基本使用
05-21
下面是Vue3和Vuex的基本使用方法： 1. 在项目中安装Vue3和Vuex： ```bash npm install vue@next vuex@next --save ``` 2. 创建一个store.js文件用于配置Vuex： ```javascript import { createStore } from 'vuex...
Vue项目中常见问题(10)Vuex基本使用、模块式开发
qq_46368050的博客
05-14 621
gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master 大家根据上传历史进行查找你需要的代码 1.Vuex是什么? Vuex是官方提供的一个插件,状态管理库,集中式管理项目中组件共用的数据V注意:并不是全部项目都需要Vuex,如果项目很小,完全不需要Vuex,如果项目很大,组件很多、数据很多,数据维护很费劲,可以用Vuex 2.Vuex的安装 在终端输入 npm instal...
vue的学习笔记：vuex
xinbaiyu的博客
09-12 330
Vuex 1.概念 ​ 在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。 2.何时使用？ ​ 多个组件需要共享数据时 3.搭建vuex环境 创建文件：src/store/index.js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备acti
重温vuex--note
weixin_44764873的博客
08-07 392
1.Vuex概述 Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享 使用Vuex管理数据的好处： A.能够在vuex中集中管理共享的数据，便于开发和后期进行维护 B.能够高效的实现组件之间的数据共享，提高开发效率 C.存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新 2.Vuex的基本使用 创建带有vuex的vue项目，打开终端，输入命令：vue ui 当项目仪表盘打开之后，我们点击页面左上角的项目管理下拉列表，再点击Vue项目管理器 点击创建项
vuex的基本使用
it小白的博客
11-02 238
​​state:{}, // 存放数据，类似于datagetters:{}, // 计算属性，类似于computedmutations:{}, // 方法，类似于methodsactions:{}, // 类似于mutations，使用commit提交 mutations，不参与直接改变参数状态modules:{} // 模块化})
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

bjzhang75

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

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

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

打赏作者

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

抵扣说明：

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

余额充值