Vue——vuex的基本使用

最新推荐文章于 2025-04-28 19:01:04 发布
原创 最新推荐文章于 2025-04-28 19:01:04 发布 · 195 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍了如何在Vue应用中安装和使用Vuex进行状态管理。通过`this.$store.dispatch('add', 1)`触发事件，调用actions中的方法，然后在mutations中更新状态，实现组件间的数据同步。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、安装vuex，转载vuex，不叙述

二、添加事件，出发vuex的操作

···
通过this.$store.dispatch(“add”,1)派遣一个事件，需要两个参数，第一个是派遣的标记名称，第二个是数据
···
在这里插入图片描述

三、在store的index.js文件里加载actions方法

在这里插入图片描述

add(context,value){ 
      context.commit("storeAdd",value)
    },

该方法里的add便是我们触发事件时设置的标记，包涵两个参数，
context：上下文
value：值
提交处理事件需要在上下文调用commit方法来提交，提交的方法要两个参数，第一个是方法名，第二个是值

四、在mutations方法里执行action中说明的方法

上面指定的事storeAdd，则执行该方法，要两个参数，第一个是简化版的state，第二个是值，一般通过state进行操作

storeAdd(state,value){ 
     state.sum+=value
   },
Vue3 学习——vue中使用vuex(超详细)
敲代码的小李同学的博客
07-18 3万+
Vue 中 Vuex 的介绍与项目实操应用。
vue状态管理——Vuex
qq_45947664的博客
11-05 1713
Vuex 是一个专为 Vue.js 应用程序开发的。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单理解vuex就是把组件共享状态抽取出来以一个全局单例模式管理，把共享的数据函数放进vuex中，任何组件都可以进行使用。什么时候我们该使用它？Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。
VUEX基础入门Store使用详解
小小默：进无止境
11-19 1万+
【1】vuex 是什么 github 站点: https://github.com/vuejs/vuex 在线文档: https://vuex.vuejs.org/zh-cn/ 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。 Vuex 和单纯的全局对象有以下两点不同： Vuex 的状态存储是响应式的。 当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高
Vuex基础用法和Vuex中的store
weixin_58431406的博客
06-17 2476
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件状态，Vuex 中可以存放一些需要在多个界面中进行共享的信息。比如用户的登录状态、用户名称、头像、地理位置信息、商品的收藏、购物车中的物品等，我们可以放在统一的地方，对它进行保存和管理。...............
引入vuex并访问存储在vuex中的数据
最新发布
rita_0567的博客
04-28 1065
1、在vue项目中①：使用命令yarn add vuex安装vuex插件②：新建文件命名为store.js,在文件中引入vue和vuex并使用vuex③构建新的Vuex.store对象,传入作为参数的对象，对象中包含基本的state、getter、mutations、actions四个属性。8、actions是用于异步更改state中数据，但还是通过mutations中的方法，它调用mutations中方法和在vue页面中调用mutataions中的函数一样。这样在全局都可以访问到store中存储的数据。
Vuex详解
输入技术、输出想法
04-28 7526
Vuex详解认识VuexVuex是做什么的?管理什么状态呢?单界面的状态管理单界面状态管理的实现多界面状态管理Vuex基本使用安装使用Vuex简单的案例Vuex核心概念StateState单一状态树GettersGetters基本使用Getters作为参数和传递参数MutationMutation状态更新Mutation传递参数Mutation提交风格Mutation响应规则Mutation常量类型 –概念Mutation同步函数ActionAction的基本定义Action返回的PromiseModule
Vue 中 store 使用方法讲解
Mr古技术分享
04-25 2万+
vuex 包含有五个基本的对象： state：存储状态。也就是变量； getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多； mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.co
vuex-store状态管理仓库的核心概念五个（state，getter，matation，action，module）详细解析（2024-05-17）
hap1994的博客
05-17 2797
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。Vuex 是一个专为 Vue.js 应用程序开发的。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vue3——vuex简单使用及持久化
m0_57712926的博客
09-12 1596
目录前言一、什么是vuex？1. vuex中的模块2. 快速上手二、vue3中使用vuex1. 准备2. 使用三、 vuex持久化1. 为什么需要持久化处理？2. 如何做持久化处理？3. 效果展示总结 前言 vue2和vue3中如何使用vuex呢？有什么不同之处呢？vue3中vuex如何做持久化处理呢？本篇文章将给你答疑解惑，一起来看一下吧~ 一、什么是vuex？ 官网：vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的
vue——vuex在vue-element-admin项目中的简单应用
景严-的博客
08-22 1360
项目需求是：如图，点击左侧el-tree的节点，在点击右侧新建用户时，把点击的节点的部门名称赋值给表单中的部门机构项，同时点击节点时，表格自动刷新，显示该部门下的数据。 原本打算用全局变量来进行这个赋值，同时用watch监听这个变量的变化，调用刷新函数，但是组长说最好用vuex来完成，于是就打算尝试一下啦。 首先看一下项目中与vuex有关的目录： 1、modules文件夹中存放的是各个模块的状态...
vue第五天笔记02——vuex数据仓库练习
08-22
在“vue第五天笔记02——vuex数据仓库练习”中，我们将深入理解Vuex的工作原理和实践应用。 首先，Vuex的核心概念包括状态(state)、派生状态(getters)、 mutations(状态变更函数)、 actions(异步操作) 和模块...
vuex中store存储store.commit和store.dispatch的用法
01-19
代码示例： this.$store.commit(‘loginStatus’, 1); this.$store.dispatch(‘isLogin’, true); 规范的使用方式： // 以载荷形式 store.commit('increment'，{ amount: 10 //这是额外的参数 }) // 或者使用对象风格的提交方式 store.commit({ type: 'increment', amount: 10 //这是额外的参数 }) 主要区别： dispatch：含有异步操作，数据提交至 actions ，可用于向后台提交数据 写法示例： this.$store
Vuex之store原理及使用指南
yan_dk的专栏
05-02 6381
介绍 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 引言 Vuex的store组件，主要存储应用中的状态，具体应用中如何来用呢？存储我们也可以使用缓存比如uni.setStorageSync(...) uni.getStorageSync()，来存储应用级的状态，也可以实现相应需求。单纯缓存数据可能并不能很好满足一定的业务场景，而且缓存数据是多样化的，状态的交互在应用中存在很多，不同模块间互
Vue开发实例（14）之Vue状态管理store
编程界明世隐的博客
05-10 1万+
Vue开发实例（14）之Vue状态管理store
Vuex理解使用；store封装；actions,mutations,state,getters使用；mapState,mapGetters,mapMutations,mapActions使用
艾米的猫儿的博客
11-17 1633
** 搭建vuex环境 ** 1.安装 npm i vuex 2. 引入store; import store from ‘你的存放路径’ 在new 中 写store使用store; 创建store的两种方式 src下创建store文件夹,新增一个index.js文件 编写index.js文件 创建三个对象分别是actions ,mutations,state // 引入vuex import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) ..
vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别
热门推荐
wushen的博客
04-27 10万+
this.$store.dispatch() 与 this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state this.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值) this.$store.commit()：同步操...
vuex--this.$store.dispatch
想去旅行的静静的博客
03-30 5万+
这是vue-element-admin的simple例子。 下面是登录vue的代码。 问题： 1、登录之后做了什么？ 2、this.store.dispatch是什么意思？3、this.store.dispatch是什么意思？ 3、this.store.dispatch是什么意思？3、this.router.push又是什么意思？ ...
this.$store.dispatch(“LoginByUsername“, this.loginForm)的用法解释
超级浣熊
01-13 9169
vue.js登录代码解释
Vuex（ Vuex 是什么，State 的基本使用，Mutation 的基本使用，Action 的基本使用，Getter 的基本使用，Module 基本使用）
qq_45585640的博客
02-18 658
Vuex（ Vuex 是什么，State 的基本使用，Mutation 的基本使用，Action 的基本使用，Getter 的基本使用，Module 基本使用）
Vue踩坑之旅——Vuex
06-03
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库，它集中管理应用程序的所有组件的状态。在使用 Vuex 过程中，可能会遇到以下一些常见的问题和坑： 1. 不要在 mutations 中执行异步操作，因为 mutations 是同步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值