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

 更新时间:2022年03月28日 11:43:34   作者:asing1elife  
这篇文章主要介绍了vuex如何在非组件中调用mutations方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

在非组件中调用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')`
    })
  }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue数据传递--我有特殊的实现技巧

    vue数据传递--我有特殊的实现技巧

    这篇文章主要介绍了vue数据传递一些特殊梳理技巧,需要的朋友可以参考下
    2018-03-03
  • vue实现登录注册模板的示例代码

    vue实现登录注册模板的示例代码

    这篇文章主要介绍了vue实现登录注册模板的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • Vue2打包部署后可动态修改后端接口地址的解决方法

    Vue2打包部署后可动态修改后端接口地址的解决方法

    本篇文章将介绍使用Vue2开发前后端分离项目时,前端打包部署后可动态修改后端接口地址的解决方法,文中通过图文结合的方式介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • vue 图片转base64本地路径跨域方式

    vue 图片转base64本地路径跨域方式

    这篇文章主要介绍了vue 图片转base64本地路径跨域方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-02-02
  • vue 基于abstract 路由模式 实现页面内嵌的示例代码

    vue 基于abstract 路由模式 实现页面内嵌的示例代码

    这篇文章主要介绍了vue 基于abstract 路由模式 实现页面内嵌的示例代码,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-12-12
  • vue3中实现文本显示省略号和tooltips提示框的方式详解

    vue3中实现文本显示省略号和tooltips提示框的方式详解

    在 B 端业务中,我们经常会遇到文本内容超出容器区域需显示省略号的需求,当鼠标移入文本时,会出现 Tooltip 显示完整内容,最近,我也遇到了这样的场景,接下来给大家介绍vue3中实现文本显示省略号和tooltips提示框的方式,需要的朋友可以参考下
    2024-04-04
  • vue实现图片滑动验证

    vue实现图片滑动验证

    这篇文章主要为大家详细介绍了vue实现图片滑动验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue在html标签{{}}中调用函数的方法总结及对比

    vue在html标签{{}}中调用函数的方法总结及对比

    这篇文章主要给大家介绍了关于vue在html标签{{}}中调用函数的方法总结及对比,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2023-03-03
  • 稍微学一下Vue的数据响应式(Vue2及Vue3区别)

    稍微学一下Vue的数据响应式(Vue2及Vue3区别)

    这篇文章主要介绍了稍微学一下 Vue 的数据响应式(Vue2 及 Vue3),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue源码学习之Object.defineProperty对象属性监听

    vue源码学习之Object.defineProperty对象属性监听

    这篇文章主要介绍了vue源码学习之Object.defineProperty对象属性监听,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05

最新评论