（六）为什么Mutations必须是同步的

老怪兽

发布于 2023-02-22 19:06:48

5530

一、`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)
    }
  }
})