在Vuex中Mutations修改状态操作下详解-js教程-PHP中文网

首页

web前端

js教程

在Vuex中Mutations修改状态操作下详解

coldplay.xixi

Jul 29, 2020 pm 05:25 PM

vuex 修改状态

在Vuex中Mutations修改状态操作下详解

上篇是读取state，这篇是修改状态。即如何操作Mutations。

一. $store.commit( )

Vuex提供了commit方法来修改状态

1.store.js文件

const mutations={
  add(state){
    state.count++
  },
  reduce(state){
    state.count--
  }
}

登录后复制

2.在button上的修改方法

二. 传值

最简单的修改状态的操作，在实际项目中我们常常需要在修改状态时传值。比如上边的例子，是我们每次只加1，而现在我们要通过所传的值进行相加。其实我们只需要在Mutations里再加上一个参数，并在commit的时候传递就就可以了。我们来看具体代码：

1.store.js

const mutations={
  add(state,n){
    state.count+=n
  },
  reduce(state){
    state.count--
  }
}

登录后复制

2.修改按钮的commit( )方法传递的参数，我们传递10，意思就是每次加10.

三.模板获取Mutations方法

实际开发中我们也不喜欢看到$store.commit( )这样的方法出现，我们希望跟调用模板里的方法一样调用。

例如：@click=”reduce” 就和没引用vuex插件一样。

1.在模板count.vue里用import 引入我们的mapMutations：

import { mapState,mapMutations } from 'vuex'

2.在模板的

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7338

Java教程

1627

CakePHP 教程

1352

Laravel 教程

1265

PHP教程

1210

显示更多

Related knowledge

在Vue应用中使用vuex时出现“Error: [vuex] do not mutate vuex store state outside mutation handlers.”怎么解决？ Jun 24, 2023 pm 07:04 PM

在Vue应用中，使用vuex是常见的状态管理方式。然而，在使用vuex时，我们有时可能会遇到这样的错误提示：“Error:[vuex]donotmutatevuexstorestateoutsidemutationhandlers.”这个错误提示是什么意思呢？为什么会出现这个错误提示？如何解决这个错误？本文将详细介绍这个问题。错误提示的含

Vue3中Vuex怎么使用 May 14, 2023 pm 08:28 PM

Vuex是做什么的？Vue官方：状态管理工具状态管理是什么?需要在多个组件中共享的状态、且是响应式的、一个变，全都改变。例如一些全局要用的的状态信息：用户登录状态、用户名称、地理位置信息、购物车中商品、等等这时候我们就需要这么一个工具来进行全局的状态管理，Vuex就是这样的一个工具。单页面的状态管理View–>Actions—>State视图层(view)触发操作(action)更改状态(state)响应回视图层(view)vuex（Vue3.

Vue2.x中使用Vuex管理全局状态的最佳实践 Jun 09, 2023 pm 04:07 PM

Vue2.x是目前最流行的前端框架之一，它提供了Vuex作为管理全局状态的解决方案。使用Vuex能够使得状态管理更加清晰、易于维护，下面将介绍Vuex的最佳实践，帮助开发者更好地使用Vuex以及提高代码质量。1.使用模块化组织状态Vuex使用单一状态树管理应用的全部状态，将状态从组件中抽离出来，使得状态管理更加清晰易懂。在具有较多状态的应用中，必须使用模块

深入了解vuex的实现原理 Mar 20, 2023 pm 06:14 PM

当面试被问vuex的实现原理，你要怎么回答？下面本篇文章就来带大家深入了解一下vuex的实现原理，希望对大家有所帮助！

在Vue应用中使用vuex时出现“Error: [vuex] unknown action type: xxx”怎么解决？ Jun 25, 2023 pm 12:09 PM

在Vue.js项目中，vuex是一个非常有用的状态管理工具。它可以帮助我们在多个组件之间共享状态，并提供了一种可靠的方式来管理状态的变化。但在使用vuex时，有时会遇到“Error:[vuex]unknownactiontype:xxx”的错误。这篇文章将介绍该错误的原因及解决方法。1.错误原因在使用vuex时，我们需要定义一些actions和mu

他趣如何修改状态他趣修改情感状态方法介绍 Mar 13, 2024 pm 01:10 PM

　　他趣如何修改状态？他趣是近期非常火热的一款聊天社交交友软件。在这款软件中，云集了海量来自世界各地的网友，并且为用户们准备了丰富多样的社交活动，非常有趣。软件内，我们还可以对自己的个人信息进行设置和修改，以便系统为我们推荐匹配度高的另一半。那么，你知道怎么修改情感状态吗？小编带来了详细的方法介绍，还不知道的一起来看看吧。　　他趣修改情感状态方法介绍　　进入他趣应用软件首页后，点击左上方个人头像的图标。　　继续点击个人头像的图标。　　点击右下角编辑资料的选项。　　点击情感状况的选项。　　勾选目标

在Vue应用中使用vuex时出现'TypeError: Cannot read property 'xxx' of undefined”怎么解决？ Aug 18, 2023 pm 09:24 PM

在Vue应用中使用Vuex是非常常见的操作。然而，偶尔在使用Vuex时会遇到错误信息“TypeError:Cannotreadproperty'xxx'ofundefined”，这个错误信息的意思是无法读取undefined的属性“xxx”，导致了程序的错误。这个问题其实产生的原因很明显，就是因为在调用Vuex的某个属性的时候，这个属性没有被正确

在Vue应用中使用vuex时出现“Error: "xxx" has already been declared as a data property.”怎么解决？ Jun 24, 2023 pm 08:46 PM

在Vue应用的开发过程中，使用vuex来管理应用状态是非常常见的做法。然而，在使用vuex的过程中，有时我们可能会遇到这样的错误提示：“Error:'xxx'hasalreadybeendeclaredasadataproperty.”这个错误提示看起来很莫名其妙，但其实是由于在Vue组件中，使用了重复的变量名来定义data属性和vuex

See all articles

在Vuex中Mutations修改状态操作下详解

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题