zoukankan      html  css  js  c++  java
  • vuex2.0.0爬坑记录 -- mutations的第一个参数state不能解构

    今天在学习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是可以解构的。特在此记录,加深印象,避免以后踩坑。

  • 相关阅读:
    STP生成树协议
    Fiddler快速入门(还有一个功能就是不经过网络,直接模拟一个响应返回给客户端)
    Qt宏Q_OBJECT展开记录
    rem_taobaofix.js
    yield return
    NET full stack framework
    API 网关
    Redis主从高可用缓存
    数据异构解决方案缓存一致性和跨服务器查询
    NET Core 防止跨站请求
  • 原文地址:https://www.cnblogs.com/biyesheng/p/6078538.html
Copyright © 2011-2022 走看看