(六)为什么Mutations必须是同步的
同步 为什么 必须
2023-06-13 09:17:09 时间
一、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
插件我们可以清楚的看见全局状态修改的过程,和被谁修改的,当然我们也可以配置其他插件
相关文章
- 服务器中心地址,互联网时间同步服务器地址(国家授时中心服务器)[通俗易懂]
- 【说站】mysql主从同步的优点
- 动态加载js的异步与同步方法
- navicat 数据库结构同步
- distcp 并行同步脚本
- 数据手把手教你用Redis自动同步数据(redis手动同步)
- Linux实现文件实时同步(linux文件实时同步)
- 微软放弃对旧版 macOS 的 OneDrive 同步支持
- 如何跳过 MySQL 主从同步中的某些操作?(mysql主从跳过)
- MySQL与Redis数据实现同步的新奇思路(redis与mysql数据同步)
- MySQL实现非停机配置主从同步(mysql不停机做主从)
- 实现多节点Redis数据同步的技术实现(多节点redis数据同步)
- 双活Redis同步保障系统高可用性(双活 redis同步)
- Linux服务器同步Rsync同步服务器文件
- Ajax请求中的异步与同步,需要注意的地方说明