欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vuex:父组件修改了state不更新子组件的原因

程序员文章站 2024-02-26 23:20:34
...

检查vuex有没有使用模块化

之前我预定义的store没有考虑到模块化,后来增加了模块化导致子组件不更新了。(当然也要使用命名空间)

分析

分析了父组件之前编写的源码之后,发现是直接使用的mapState导入的state,这里就导致子组件接收到的props实际上只是store的直接子元素,所以子组件收到的props为undefined。

解决办法

重写一下mapState函数就行了。我们可以使用vuex给我们提供的createNamespacedHelpers(),参数是子模块的路径

    const { mapState, mapActions } = createNamespacedHelpers('data');//data是自己定义的模块

store/index.js

export default new Vuex.Store({
    modules:{
      data:{
        namespaced:true,
        state:data,
        mutations:dataMutations,
        actions:dataActions,
        getters:{

        }
      },
      status:{
        namespaced:true,
        state:status
      }
    }
})