运维开发网

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

运维开发网 https://www.qedev.com 2022-04-22 16:14 出处:网络
这篇文章主要介绍了vuex如何在非组件中调用mutations方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

这篇文章主要介绍了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属性介绍

是在状态中修改状态的唯一方法;在组件的自定义方法中,使用此。$ store . commit(lsquo;对应于方法rsquo in突变;,新值)方法,并将新值提交给突变中的相应方法。突变属性中的每个方法都有两个参数,即状态和有效负载;;实际上,state是vuex中的state属性,有效载荷称为突变的有效载荷,实际上是传递的值。通常,payload传输一个对象,因此它可以包含多个字段,并且记录的突变将更具可读性:

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


对象风格的提交方式

提交变异的另一种方法是直接使用包含类型属性的对象:

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

当使用对象样式提交方法时,整个对象作为有效载荷传递给突变函数,因此处理程序保持不变:

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


使用常量替代 Mutation 事件类型

使用常量代替突变事件类型是各种Flux实现中的常见模式。这样可以让linter这样的工具工作,同时,把这些常量放在一个单独的文件中,可以让你的代码协作者一眼就知道整个app中包含的突变:

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

不使用常量由你决定;;这将有助于需要多人协作的大型项目。但如果你不喜欢,也可以不喜欢。


Mutation 必须是同步函数

一个重要的原则是记住突变必须是同步函数。为什么?请参考以下示例:

mutations: {? someMutation (state) {? ? api.callAsyncMethod(() =gt; {? ? ? state.count++? ? })? }}

现在,假设我们正在调试一个应用程序,并在devtool中观察突变日志。每一个突变都被记录下来,devtools需要捕捉前一个状态和下一个状态的快照。但是,在上面的例子中,mutation中异步函数中的回调使得这一点无法实现:因为当触发mutation时,回调函数还没有被调用,devtools不知道回调函数实际何时被调用;;本质上,回调函数中的任何状态变化都是不可追踪的。


在组件中提交 Mutation

你可以用这个。$ store . commit(lsquo;xxxrsquo)提交突变,或者使用mapMutations辅助函数将组件中的方法映射到store.commit调用中(需要在根节点注入存储)。

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

精彩评论

暂无评论...
验证码 换一张
取 消