vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构

2023-06-15,,

今天在学习vuex的过程中,遇到了一个很困扰人的问题,最终利用vuex的状态快照工具logger解决了问题。

问题是这样的,我在子组件中使用了mapState()函数来将状态映射至子组件中,使子组件能够获取到状态,但是发现除了第一次能够得到状态的初始值外,后面无论状态如何变更,都获取不到更新的结果。

这是子组件mapState部分的代码:

computed: mapState({
user: ({user}) => (user),
session: ({sessions, currentSessionId}) => sessions.find(session => session.id === currentSessionId)
})

在这段代码中,在其它地方,我利用action去commit状态中的mutation,并且在action和mutation的函数内部都log出来了新的值,于是我认为状态发生了改变,按照这个思路,去找为什么子组件中没有响应状态的变化,调试许久,最终无果,回去翻看vuex的文档,发现插件部分,有一个vuex自带的Logger插件,配置方式如下:

import createLogger from 'vuex/dist/logger'
// 在实例中配置Logger
const store = new Vuex.Store({
...
plugins: [createLogger()]
})

之后利用这个Logger工具,发现虽然mutation被触发并且接受到了payload,但是状态并没有发生任何变化,于是找到了问题所在,是mutation部分的问题,我的mutaition一开始是这样写的:

const store = new Vuex.store({
...
mutations: {
some ({sessions}, payload) {
// 处理sessions
}
}
})

对比官方文档发现,官方文档指明state应该作为第一参数,我想当然地对state进行了参数解构,所以导致了这个错误,把第一参数改回state,在函数内部调用state最终问题得以解决,这里说明vuex2.0.0版本的mutations中定义的mutation,第一个参数是不能解构的,这里与定义action是不同的,action的第一参数context是可以解构的。特在此记录,加深印象,避免以后踩坑。

vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构的相关教程结束。

《vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构.doc》

下载本文的Word格式文档,以方便收藏与打印。