iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vuex如何在非组件中调用mutations方法
  • 737
分享到

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

2024-04-02 19:04:59 737人浏览 薄情痞子
摘要

目录在非组件中调用mutations方法在组件中调用在非组件中调用Vuex的mutations属性mutations属性介绍对象风格的提交方式使用常量替代 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')`
    })
  }
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vuex如何在非组件中调用mutations方法

本文链接: https://www.lsjlt.com/news/144131.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vuex如何在非组件中调用mutations方法
    目录在非组件中调用mutations方法在组件中调用在非组件中调用vuex的mutations属性mutations属性介绍对象风格的提交方式使用常量替代 Mutation 事件类型...
    99+
    2024-04-02
  • vuex怎么在非组件中调用mutations方法
    这篇文章主要讲解了“vuex怎么在非组件中调用mutations方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vuex怎么在非组件中调用mutations方法”吧!在非组件中调用muta...
    99+
    2023-06-29
  • vuex mutations的两种调用方法小结
    目录mutations的调用方法直接通过$store.commit调用通过在methods中注册方法调用细数mutations的用法为什么要用mutations用法mutations...
    99+
    2024-04-02
  • Vue中一个组件调用其他组件的方法详解(非父子组件)
    目录前言方式一:引用式方式二:vuex1、src/store/index.js2、被使用组件- A 页面(组件)3、使用触发页面-B 页面(组件)方式三:使用事件总线eventBus...
    99+
    2022-11-13
    vue调用其他组件方法 vue组件调用 vue组件之间调用
  • php方法如何在其他文件中调用
    这篇文章主要介绍“php方法如何在其他文件中调用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“php方法如何在其他文件中调用”文章能帮助大家解决问题。一、PHP方法的调用方式在了解php方法在其他文...
    99+
    2023-07-05
  • PHP方法如何在其他文件中调用?
    在PHP中,为了在不同的文件中重复使用特定功能或代码块,需要将这些代码封装成函数或方法。这样可以实现代码的复用性、模块化和易维护性。在其他文件中调用PHP方法的方法有多种,以下将介绍几...
    99+
    2024-03-05
    php文件调用 php调用方法 外部调用php
  • vue如何从组件外部调用方法
    小编给大家分享一下vue如何从组件外部调用方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!从组件外部调用方法你可以通过给它一个从组件外部调用方法ref:<...
    99+
    2023-06-27
  • Vue中$emit $refs子父组件间方法如何调用
    这篇文章将为大家详细讲解有关Vue中$emit $refs子父组件间方法如何调用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1、$emit子组件调用父组件的方法并传递数...
    99+
    2024-04-02
  • Vue3 封装扩展并简化Vuex在组件中的调用问题
    目录1.创建文件utils/vueTool.js2.添加开发环境中的模块验证3.页面调用封装如果你在项目中使用了 vuex模块化,并且在项目中使用actions中函数调用频率高,推荐...
    99+
    2023-01-28
    Vue3 封装扩展 Vuex 组件 调用
  • 如何在PHP中调用其他文件中的方法?
    如何在PHP中调用其他文件中的方法? 在PHP开发中,我们经常会遇到需要在一个文件中调用另一个文件中的方法的情况。这种情况通常发生在项目中不同的文件中功能需要相互调用的时候。在PHP中...
    99+
    2024-03-05
    php 文件 调用方法
  • Vue中的非单文件组件如何使用
    本篇内容介绍了“Vue中的非单文件组件如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一,什么是组件实现应用中局部功能代和资源的集合(...
    99+
    2023-07-05
  • 如何在Java中调用jython方法
    如何在Java中调用jython方法?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1 什么是jython? 他其实是一门语言,并非是Java 或者Python的解释器.用它...
    99+
    2023-05-31
    jython java ava
  • 如何在html中调用php方法
    这篇“如何在html中调用php方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何在html中调用php方法”文章吧。在...
    99+
    2023-07-05
  • 详解Vue3 父组件调用子组件方法($refs 在setup()、<script setup> 中使用)
    在 vue2 中 ref 被用来获取对应的子元素,然后调用子元素内部的方法。 <template> <!-- 子组件 --> <TestComp...
    99+
    2022-11-13
    Vue3 父组件调用子组件 Vue父组件子组件
  • java数组方法如何调用
    要调用Java数组的方法,需要按照以下步骤进行操作: 声明一个数组变量,并为其分配内存空间。例如,声明一个整数数组: int[]...
    99+
    2023-10-24
    java
  • 在PHP中如何实现方法在其他文件中的调用?
    在PHP中如何实现方法在其他文件中的调用 对于PHP开发者来说,有时候我们会需要在一个文件中编写某些方法,然后在其他文件中调用这些方法。这种情况下,我们可以使用PHP的命名空间(nam...
    99+
    2024-03-05
    php 函数调用 文件路径定位
  • vue如何跨层级调用组件内的方法
    Vue作为一款流行的前端框架,具有强大的数据绑定和组件化开发能力,但在实际项目中,我们常常会遇到跨层级调用组件内的方法的需求。本文将介绍如何使用Vue的组件通信机制实现跨层级调用组件内的方法。一、全局事件总线Vue提供了一个非常简单的全局事...
    99+
    2023-05-23
  • 在React中如何使用Vuex
    这篇文章给大家分享的是有关在React中如何使用Vuex的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。如何使用一:创建Store实例:与vuex一样,使用单一状态树(一个对象)包...
    99+
    2024-04-02
  • 如何在js中调用php的方法
    JavaScript与PHP是两种不同的编程语言,前者运行在浏览器中,而后者则运行在服务器端。尽管两种语言的运行环境不同,但是它们可以通过特定的方式来进行交互。在本文中,我们将会介绍如何在JavaScript中调用PHP方法。一、使用AJA...
    99+
    2023-05-22
  • 如何在Vue中调用if方法(两种方法)
    Vue是一种流行的JavaScript框架,它帮助开发人员更轻松地构建交互式Web应用程序。在Vue中,条件语句是必不可少的一部分,经常使用if语句来根据不同的条件显示或隐藏HTML元素。在本文中,我们将学习如何在Vue中调用if方法。使用...
    99+
    2023-05-14
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作