vuex mutations的两种调用方法小结
目录
- mutations的调用方法
- 直接通过$store.commit调用
- 通过在methods中注册方法调用
- 细数mutations的用法
- 为什么要用mutations
- 用法
mutations的调用方法
直接通过$store.commit调用
<button @click="$store.commit('mutations中的方法名','可带参数')">调用</button>
不需要再进行其他配置
通过在methods中注册方法调用
//先引入mapMutations import {mapMutations} from 'vuex' export default { data(){ return{ msg:"hello vuex" } }, //注册方法,三个.是属性展开符,可以将mapMutations中的方法展开后放入methods中,就可以直接调用了 methods:{ ...mapMutations(['mutations中的方法名称']) } }
<button @click="mutations中的方法名称('可带参数')">-</button>
细数mutations的用法
为什么要用mutations
使用mutations的好处是可以跟踪到是哪里调用了mutations里的方法,在严格模式下调用mutations也不会报错。
如果用其它方法的话上面说的两个好处都不存在。
用法
先定义个mutations对象,然后定义指定的方法就可以了,很简单,代码示例:
state: { isHome: true }, mutations: { changeIsHome(state) { // 这里将state传进来了 state.isHome = false } }
在stote.js中定义好mutations方法之后,就在vue中触发事件的时候调用mutations方法就可以了,调用方法示例:
// 这里示例是在created方法中触发mutations方法 created() { this.$store.commit('changeIsHome') // 这就是调用的方法 },
执行:this.$store.commit('changeIsHome');就可以调用mutations方法了。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vuex modules模式下mapState/mapMutations的操作实例
当我们使用 Vuex 实现全局状态维护时,可能需要将状态值划分多个模块,比如一些 root 级的用户登录状态,token,用户级的用户信息,购物车级的购物车信息. 下面我们实例演示下如何在多模块下使用 mapState/mapMutations. modules 只作用于属性,属性会归属在相应的模块名的命名空间下. mutations, actions, getter 没有命名空间的限定,所以要保证全局的唯一性,否则后者会覆盖前者 store/index.js import Vue from '
-
在Vuex中Mutations修改状态操作
上篇是读取state,这篇是修改状态.即如何操作Mutations. 一. $store.commit( ) Vuex提供了commit方法来修改状态 1.store.js文件 const mutations={ add(state){ state.count++ }, reduce(state){ state.count-- } } 2.在button上的修改方法 <button @click="$store.commit('add')">+</button>
-
Vuex中的Mutations的具体使用方法
在 Vuex 中 store 数据改变的唯一方法就是提交 mutations.mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法全部放在 mutations 里面,使得数据和视图分离. Mutations使用 Vuex 中的 mutations 非常类似于事件,每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler),也可以理解为{type:handler()},这和订阅发布有点类似.先注册事件,当触发响
-
vuex实现像调用模板方法一样调用Mutations方法
我们在写vue项目中如果,我们发现vuex中<button @click="$store.commit('jia')">-</button>是十分麻烦的,我们想直接写成@click中的jia,我们应该如何处理? 我们可以想一想我们在解决state时是如何解决的,为此我们将介绍一个与解决state相同方案 第一步在我们自己创建模板a.vue里引入我们的mapMutations 代码如下: import {mapState,mapMutations} from 'v
-
vuex如何在非组件中调用mutations方法
目录 在非组件中调用mutations方法 在组件中调用 在非组件中调用 vuex的mutations属性 mutations属性介绍 对象风格的提交方式 使用常量替代 Mutation 事件类型 Mutation 必须是同步函数 在组件中提交 Mutation 在非组件中调用mutations方法 一般情况下调用 mutations.js 中的方法都是在组件中,如果想在非组件中调用,则需要使用如下方式 在组件中调用 import {mapMutations} from 'vuex' impor
-
vuex mutations的两种调用方法小结
目录 mutations的调用方法 直接通过$store.commit调用 通过在methods中注册方法调用 细数mutations的用法 为什么要用mutations 用法 mutations的调用方法 直接通过$store.commit调用 <button @click="$store.commit('mutations中的方法名','可带参数')">调用</button> 不需要再进行其他配置 通过在methods中注册方法调用 //先引入mapMuta
-
thinkphp的钩子的两种配置和两种调用方法
thinkphp的钩子行为类是一个比较难以理解的问题,网上有很多写thinkphp钩子类的文章,我也是根据网上的文章来设置thinkphp的钩子行为的,但根据这些网上的文章,我在设置的过程中,尝试了十几次都没有成功,不过,我还是没有放弃,最后还是在一边调节细节,一边试验的过程中实现了钩子行为的设置.下面是我个人的设置经验,在这里跟大家分享一下. 个人做了两种设置,都试验成功了,一个简单点,在thinkphp的核心文件中模仿核心行为类添加了另一个行为类,下面是截图: 我的虚拟主机配置文件夹是D:/
-
Javascript setInterval的两种调用方法(实例讲解)
如下所示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>&l
-
ASP.NET防止页面刷新的两种解决方法小结
方法有二,总结如下: 第一方法: 直接在CS代码里敲: Response.Buffer = true; Response.ExpiresAbsolute = DateTime.Now.AddSeconds(-1); Response.Expires = 0; Response.CacheControl = "no-cache"; 当有人想按后退时页面已过期,效果就达到了 第二方法: SubmitOncePage:解决刷新页面造成的数据重复提交问题(网上资料) 执行过postback操作
-
golang两种调用rpc的方法
本文实例讲述了golang两种调用rpc的方法.分享给大家供大家参考,具体如下: golang的rpc有两种方法进行调用,一种是rpc例子中给的: 复制代码 代码如下: package main import ( "net/rpc" "net/http" "log" "net" "time" ) type Args struct
-
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. (1)通过aspx.cs的静态方法+WebMethod进行处理 简单的介绍下WebMethod方法的用法 1.修饰符主要用public static修饰 2.方法前面加上[WebMethod]属性表明这是WebMethod方法 3.前台html页面(Client端)访问时要使用post方法,和后台.cs文件进行数据交互,否则会返回整个html页面. 4.当后台页面返回数据后
-
JavaScript监听手机物理返回键的两种解决方法
JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventListener("popstate", function(e) { window.location = 'http://www.baidu.com'; }, false); function pushHistory() { var state = { title: "title&quo
-
Android之Intent附加数据的两种实现方法
本文实例讲述了Android之Intent附加数据的两种实现方法.分享给大家供大家参考.具体如下: 第一种写法,用于批量添加数据到Intent: Intent intent = new Intent(); Bundle bundle = new Bundle(); //该类用作携带数据 bundle.putString("name", "林计钦"); intent.putExtras(bundle); //为意图追加额外的数据,意图原来已经具有的数据不会丢失,但ke
-
Python单例模式的两种实现方法
Python单例模式的两种实现方法 方法一 import threading class Singleton(object): __instance = None __lock = threading.Lock() # used to synchronize code def __init__(self): "disable the __init__ method" @staticmethod def getInstance(): if not Singleton.__instanc
-
计时器的time_t和clock_t 的两种实现方法(推荐)
想给自己初步完成的相空间搜索算法计算一下运行时间,于是尝试了如下使用 time_t 类型的方式 #include <stdlib.h> #include <iostream> #include <time.h> #include "StateFunctions.h" using namespace std; int main(int argc, char** argv) { time_t start, finish; time(&start)
随机推荐
- 另一种希望别人无法修改js的代码
- 解析Java的设计模式编程之解释器模式的运用
- asp.net 汉字转换拼音及首字母实现代码
- php通过array_shift()函数移除数组第一个元素的方法
- 关于g++和gcc的相同点和区别详解
- 详解Python 模拟实现生产者消费者模式的实例
- 深入理解Python中的元类(metaclass)
- Android实现多线程下载图片的方法
- MySQL学习笔记之数据的增、删、改实现方法
- asp.net(C#)使用QRCode生成图片中心加Logo或图像的二维码实例
- Django框架如何使用ajax的post方法
- javaScript的函数对象的声明详解
- java中调用GDAL DLL的实现方法
- jQuery 选择器详解
- 详解SimpleDateFormat的线程安全问题与解决方案
- C#使用StreamWriter写入文件的方法
- Android scrollToTop实现点击回到顶部(兼容PullTorefreshScrollview)
- Android实现侧滑只需一步
- Python函数定义及传参方式详解(4种)
- Android实现万能自定义阴影控件实例代码