vuex如何在非组件中调用mutations方法

目录
  • 在非组件中调用mutations方法
    • 在组件中调用
    • 在非组件中调用
  • vuex的mutations属性
    • mutations属性介绍
    • 对象风格的提交方式
    • 使用常量替代 Mutation 事件类型
    • Mutation 必须是同步函数
    • 在组件中提交 Mutation

在非组件中调用mutations方法

一般情况下调用 mutations.js 中的方法都是在组件中，如果想在非组件中调用，则需要使用如下方式

在组件中调用

import {mapMutations} from 'vuex'
import {SET_IS_LOGIN} from 'store/mutation-types'
export default {
    methods: {
        ...mapMutations({
            set_is_login: SET_IS_LOGIN
        }),
        init() {
            this.set_is_login(true)
        }
    }
}

在非组件中调用

import store from 'store'
import {SET_IS_LOGIN} from 'store/mutation-types'
function init() {
    store.commit(SET_IS_LOGIN, true)
}

vuex的mutations属性

mutations属性介绍

是唯一一种方式来修改state中的状态的；在组件的自定义方法中，使用this.$store.commit(‘对应mutations中的方法’, 新的值)方法，把新的值提交给mutations中相对应的方法，mutations属性中的每个方法中有两个参数，分比为state和payload；state其实就是vuex中的state属性，payload叫做mutations的载荷，其实就是传过来的值。一般payload传的是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})

对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

store.commit({
  type: 'increment',
  amount: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

使用常量替代 Mutation 事件类型

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

用不用常量取决于你——在需要多人协作的大型项目中，这会很有帮助。但如果你不喜欢，你完全可以不这样做。

Mutation 必须是同步函数

一条重要的原则就是要记住 mutation 必须是同步函数。为什么？请参考下面的例子：

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

在组件中提交 Mutation

你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import { mapMutations } from 'vuex'
export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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的两种调用方法小结

    目录 mutations的调用方法 直接通过$store.commit调用 通过在methods中注册方法调用 细数mutations的用法 为什么要用mutations 用法 mutations的调用方法 直接通过$store.commit调用 <button @click="$store.commit('mutations中的方法名','可带参数')">调用</button> 不需要再进行其他配置 通过在methods中注册方法调用 //先引入mapMuta

  • vuex实现像调用模板方法一样调用Mutations方法

    我们在写vue项目中如果,我们发现vuex中<button @click="$store.commit('jia')">-</button>是十分麻烦的,我们想直接写成@click中的jia,我们应该如何处理? 我们可以想一想我们在解决state时是如何解决的,为此我们将介绍一个与解决state相同方案 第一步在我们自己创建模板a.vue里引入我们的mapMutations 代码如下: import {mapState,mapMutations} from 'v

  • Vuex中的Mutations的具体使用方法

    在 Vuex 中 store 数据改变的唯一方法就是提交 mutations.mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法全部放在 mutations 里面,使得数据和视图分离. Mutations使用 Vuex 中的 mutations 非常类似于事件,每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler),也可以理解为{type:handler()},这和订阅发布有点类似.先注册事件,当触发响

  • vuex如何在非组件中调用mutations方法

    目录 在非组件中调用mutations方法 在组件中调用 在非组件中调用 vuex的mutations属性 mutations属性介绍 对象风格的提交方式 使用常量替代 Mutation 事件类型 Mutation 必须是同步函数 在组件中提交 Mutation 在非组件中调用mutations方法 一般情况下调用 mutations.js 中的方法都是在组件中,如果想在非组件中调用,则需要使用如下方式 在组件中调用 import {mapMutations} from 'vuex' impor

  • 在Vuex使用dispatch和commit来调用mutations的区别详解

    main.js中 import Vuex from 'vuex' Vue.use(vuex); const store = new Vuex.store({ state: { nickName: "", cartCount: 0 }, mutations: { updateUserInfo(state,nickName) { state.nickName = nickName; }, updateCartCount(state,cartCount) { state.cartCount

  • COM组件中调用JavaScript函数详解及实例

    COM组件中调用JavaScript函数详解及实例 要求是很简单的,即有COM组件A在IE中运行,使用JavaScript(JS)调用A的方法longCalc(),该方法是一个耗时的操作,要求通知IE当前的进度.这就要求使用回调函数,设其名称为scriptCallbackFunc.实现这个技术很简单: 1 .组件方(C++) 组件A 的方法在IDL中定义: [id(2)] HRESULT longCalc([in] DOUBLE v1, [in] DOUBLE v2, [in, optional

  • vue 父组件中调用子组件函数的方法

    在父组件中调用子组件的方法: 1.给子组件定义一个ref属性.eg:ref="childItem" 2.在子组件的methods中声明一个函数.eg: useInPar:function (str) {console.log(str)} 2. 在父组件的中声明一个函数,并通过this.$refs.childItem.userInPar来使用子组件中声明的函数. 父组件: <template> <child-item ref='child' /> <butt

  • Kotlin 语言中调用 JavaScript 方法实例详解

    Kotlin 语言中调用 JavaScript 方法实例详解 Kotlin 已被设计为能够与 Java 平台轻松互操作.它将 Java 类视为 Kotlin 类,并且 Java 也将 Kotlin 类视为 Java 类.但是,JavaScript 是一种动态类型语言,这意味着它不会在编译期检查类型.你可以通过动态类型在 Kotlin 中自由地与 JavaScript 交流,但是如果你想要 Kotlin 类型系统的全部威力 ,你可以为 JavaScript 库创建 Kotlin 头文件. 内联 J

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • jQuery中调用WebService方法小结

    jQuery中调用WebService方法小结

    个人感觉有两点是比较方便的:第一,在对WebService做ajax请求的时候,请求的url的写法是:服务地址/调用的方法名称,这样在请求的url中就确定了要调用的方法了,不必再在WebService代码中去判断ajax请求调用的是哪个方法了.第二,方法可以返回更多的数据类型,比如对象,泛型集合等:在ajax请求返回后,会自动将这些类型转换为json对象.而使用ashx的方式的话,需要先将这些类型转换为json格式的数据才能返回. 在使用jQuery调用WebService的方法的时候,只能发送

  • 在ASP.NET中调用存储过程方法新解

    在使用.NET的过程中,数据库访问是一个很重要的部分,特别是在B/S系统的构建过程中,数据库操作几乎成为了一个必不可少的操作.调用存储过程实现数据库操作使很多程序员使用的方法,而且大多数的程序员都是能使用存储过程就使用存储过程,很少直接使用SQL语句,所以存储过程是很有用而且很重要的. 存储过程简介 简单的说,存储过程是由一些SQL语句和控制语句组成的被封装起来的过程,它驻留在数据库中,可以被客户应用程序调用,也可以从另一个过程或触发器调用.它的参数可以被传递和返回.与应用程序中的函数过程类似,

  • 详解vue组件中使用路由方法

    vue组件中使用路由 1.实现下载路由模块 的命令如下 2.引入路由的命令如下 3.实现接着通过use在vue全局注册使用的命令如下 4.最后将路由表导出的命令如下 5.在main.js中引入路由组件命令如下 6.在App.vue的模板中设置路由出口的命令如下 7.实现添加组件步骤如下 8.把组件添加到路由表的操作步骤如下 以上8点就是关于vue组件中使用路由的步骤,感谢大家对我们的支持.

随机推荐