首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >(六)为什么Mutations必须是同步的

(六)为什么Mutations必须是同步的

作者头像
老怪兽
发布2023-02-22 19:06:48
3190
发布2023-02-22 19:06:48
举报
一、createLogger 日志函数插件

相关信息

只有同步执行的操作才能被 createLogger 捕获记录到,下面看一下详细代码

import { createApp } from 'vue'
import { createStore, createLogger } from 'vuex'
import App from './App.vue'

const store = createStore({
  // 插件是一个数组,同时可以配置多个插件
  plagins: [createLogger()],

  state() {
    return {
      num: 1
    }
  },

  mutations: {
    increment(state) {
      state.num++
    }
  }
})
  • 当上面用的是同步的 mutations createLogger 就能记录用户操作数据的变化
mutations: {
  increment(state) {
    setTimeout(()=> {
      state.num++
    },1000)
  }
}
  • 如果当 mutations 里面的操作时异步的时候,就无法及时捕获到用户改变的记录
二、actions 里面防做异步操作

相关信息

因为 actions 不能直接修改 state 的全局状态,只能去触发,mutations 里面的函数去修改,下面来看一下 actions 函数的日志是怎么样的

import { createApp } from 'vue'
import { createStore, createLogger } from 'vuex'
import App from './App.vue'

const store = createStore({
  // 插件是一个数组,同时可以配置多个插件
  plagins: [createLogger()],

  state() {
    return {
      num: 1
    }
  },

  mutations: {
    increment(state) {
      state.num++
    }
  },

  actions: {
    increment(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  }
})
  • 可以看到先出发的是 actions 后触发的时候 mutations,因为 actions不能直接修改state所有没有状态的改变,而经过一秒后才通过mutations修改了state` 里面的数据并且打印出日志

总结

通过 createLogger 插件我们可以清楚的看见全局状态修改的过程,和被谁修改的,当然我们也可以配置其他插件

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022年11月26日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、createLogger 日志函数插件
  • 二、actions 里面防做异步操作
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档