Vuex中Mutation 的基本使用

于 2022-06-24 17:04:51 发布
阅读量1.9k 收藏 2
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53225741/article/details/125449051
版权

在前面中我们讲解了关于Vuex的来历和运转流程,今天我们再来看一下Vuex中Mutation, 首先我们需要了解一个知识点 我们一般怎样修改 State 中的数据,是直接修改吗?

image.png 答案是可以的,但是为什么大家都没有见过有人这样子做呢? 这是因为这种方法会导致修改来源不明确的问题，不利于调试和后期的维护。因此Vuex 官方也禁止我们直接修改！

那么我们改如何修改我们的数据呢?,其实官方早就替我们想好了,其实就是我们今天要讲的Mutation来修改数据 那么我们先要了解Mutation是什么东西.Mutation 本质上是 JavaScript 函数，专门用来变更 Store 中的数据。而且他那够确保能够确保修改来源的唯一性，方便调试和后期维护。

image.png

其中：State、组件、Mutation 之间的关系就如下图所示 image.png

而Mutation的使用方法也很简单

我们首先只需要在 Vuex 中定义 Mutation 方法,然后在我们的组件中调用他就可以了 this.$store.commit(‘方法名’) image.png 不过如果在我们使用过程中遇到需要多个参数的话我们该怎么办呢?

image.png

这个时候我们就引进了一个新的方法载荷（Payload）,而在Vuex 中的载荷就是参数的意思，通过载荷可以提高 Mutation 方法的通用性。

image.png

在组件中，可以通过 this.$store.commit() 方法的第二个参数来提交载荷（参数）

image.png

当然Vuex 还提供了一种辅助函数叫mapMutations 辅助函数,可以方便的把 Store 中指定的方法，映射为当前组件的 methods.

image.png

我们只需要按照下面的方法来使用就可以了

image.png

AI画手小王
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
10-17
今天小编就为大家分享一篇关于Vue唯一可以更改vuex实例中state数据状态的属性对象，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
Vuex--mutations--使用/教程/实例
IT利刃出鞘的博客
01-27 823
本文用示例介绍Vuex的五大核心之一：mutations。
Vuex中的mutations
weixin_43613849的博客
07-06 1198
1、Mutation介绍 Vuex的store状态的更新唯一方式：提交Mutation 2、Mutation的使用 1、无参数的状态更新 mutation的定义方式： 通过mutation更新： 具体流程如下： 2、Mutation传递参数 在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数 参数被称为是mutation的载荷(Payload) 1、一个参数 mutation的定义方式： 通过mutation更新： 例如coun.
Vuex——Mutation
NAUD
02-08 809
更改Vuex的store中的状态的唯一方法是提交mutation！Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们进行状态更改的地方，并且它会接受state作为第一个参数：你不能直接调用一个mutation handler。这个选项更像是事件注册：“当触发一个类型为increment的muta...
Vuex中mutations的用法
Anony_me的博客
04-01 1万+
Vuex中mutations的用法之一 在 Vuex 中 store 数据改变的唯一方法就是提交 mutations。mutations里面装着一些改变数据方法的集合，这是Vuex 设计很重要的一点，就是把处理数据逻辑方法全部放在 mutations 里面，使得数据和视图分离。 Mutations使用 Vuex 中的 mutations 非常类似于事件，每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler)，也可以理解为{type:handler()}，这和订阅发布有
浅谈vuex之mutation和action的基本使用
08-29
浅谈Vuex之mutation和action的基本使用 在Vuex中，mutation和action是两个核心概念，它们之间存在紧密的联系。mutation是改变state的唯一方式，而action则是将mutation commit到store中。 首先， lets talk about ...
详解vuex中mutation/action的传参方式
10-18
例如，`asyncMul` action 中使用 setTimeout 来模拟异步操作，并在完成后提交 mutation。在组件中，你可以通过 `.then()` 方法来处理 Promise 返回的结果。 ### 总结 Vuex 提供了一个单一状态树来存储所有组件的...
浅谈vuex actions和mutation的异曲同工
10-17
在组件中使用时，可以在methods中调用： ```javascript export default { methods: { add() { this.$***mit('addNum', { amount: 1 }); }, asyncAdd() { this.$store.dispatch('increment', { amount: 1 }); ...
Vuex基本使用
09-20
3. **在组件中使用**：通过 `this.$store` 访问 store，`this.$store.state` 获取状态，`this.$store.commit` 触发 mutation，`this.$store.dispatch` 触发 action。 ```html <button @click="increment">...
Vuex之mutation
weixin_33939380的博客
02-02 105
我们已经可以在组建中使用store里面的数据了，那么我们要怎么修改这个数据呢？vuex提供了mutation，官网上说： 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并...
【Vuex入门】——（四）Mutation
mumuwei的博客
03-22 1717
一、Mutation的作用 更改 Vuex 的store 中的状态的唯一方法是提交 mutation。 Vuex 中的 mutation 非常类似于事件： 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。 这个回调函数就是我们实际进行状态更改的函数，并且它会接受 state 作为第一个参数： const store = new Vuex.Store({ state: { count: 1 }, mutations:
Vuex Mutations的正确使用
u010234868的专栏
10-08 300
store.js中声明Mutations中的方法： import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) Vue.config.devtools = true export default new Vuex.Store({ state: { count: 10 }, mutations: { addCount(state, num) { state.count += num; }, .
Vuex中的Mutation
qq_44333912的博客
07-27 758
Mutation的作用？ 用于变更Store中的数据 。 如何使用Mutation? const store = new Vuex.Store({ state : { count : 0 }, mutations:{ //定义mutation , 注意有s xxx(state){ //xxx代表函数名，state指向上述中的state ...
关于vuex 的Mutation
超级小恐龙~
07-11 348
不可用this.$store.mutations.xxx(xx)方式调用mutations的方法， 在main.js中调用mutations方法： 你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为increment的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用store.commit方法 提交载荷（Payload） 你可以向store.commit传入额外的参数，即 mu...
vuex 中的mutations
m18697787579的博客
03-02 1035
在vuex中想改变state中的状态往往通过一个叫做mutations的东西进行操作 官方文档如下 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数： const store = createStore({ state: { count:
Vuex中的mutations属性
return_MU的博客
05-28 4073
一、什么是mutations Mutation的中文翻译是“突变”，在Vuex中，它是store对象的一个属性，mutations被用于更新store中所存放的所有状态。关于mutations，有以下几点需要注意 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 通过this.$store.state来直接修改store中的状态也是有效的，但这种方式的修改无法被Vue的调试工具所记录，因此不推荐使用这种方法 通常情况下，Vuex要求我们的mutation中的方法必须是同步方法，
Vuex mutation
weixin_40030173的博客
01-22 138
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count:1 }, mutations: { increment (state) { state.count++ }, increment1 (state, n) { state.count += n } } }) export d
Vuex入门(二)—— mutations详解
m0_49714202的博客
03-14 1068
目录1.store.js2.mutations.vue组件mutations详解 + 图片 Vuex官网:https://vuex.vuejs.org/zh/guide/#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84-store 1.store.js Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default n
Vuex的基本使用(mutations)
weixin_43613849的博客
07-05 369
1、什么是Vuex 官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex 也集成到 Vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 1、单页面状态管理 State：不用多说，就是我们的状态。（你姑且可以当做就是data中的属性） View：视图层，可以针对State的变化，.
详解Vuex中mutation/action传参策略与实例
本文将深入探讨Vuex中mutation和action的传参机制，这两种核心概念在状态管理和异步处理中扮演着关键角色。Vuex是Vue.js官方推荐的状态管理模式，它通过严格的模式确保组件间的通信状态一致性。 首先，我们来看看...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值