uni-app 3.2.3版本下父子组件使用vuex中同一个属性出现重复定义警告

uni-app 3.2.3版本下父子组件使用vuex中同一个属性出现重复定义警告

项目信息 详细信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 Windows 10 专业版 版本号:21H1
HBuilderX类型 正式
HBuilderX版本 3.2.3
手机系统 全部
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

在pc端页面，以及小程序都有bug

操作步骤：

无

预期结果：

无

实际结果：

无

bug描述：


更多关于uni-app 3.2.3版本下父子组件使用vuex中同一个属性出现重复定义警告的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

【正确报bug的姿势】https://ask.dcloud.net.cn/article/38139

更多关于uni-app 3.2.3版本下父子组件使用vuex中同一个属性出现重复定义警告的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app 3.2.3版本中，父子组件使用Vuex中同一个属性出现重复定义警告，通常是由于Vuex的严格模式（strict mode）导致的。当在父子组件中同时修改同一个Vuex状态时，严格模式会检测到非mutation内的状态变更，从而抛出警告。

问题原因：

  1. 严格模式：Vuex默认在开发环境下启用严格模式，会深度监测状态树，检测不合规的状态修改。
  2. 父子组件同时修改状态：如果父子组件都通过mapState或computed绑定同一个Vuex状态，并在组件中直接修改（如使用v-model），严格模式会警告状态变更未通过mutation。

解决方案：

  1. 关闭严格模式（不推荐）： 在Vuex的store配置中设置strict: false，但会失去状态变更的调试追踪能力。

    export default new Vuex.Store({
  strict: false,
  // ...其他配置
});

  2. 通过mutation修改状态： 确保所有状态变更都通过提交mutation实现，避免直接修改。例如：

    • 在Vuex中定义mutation：
      mutations: {
  updateState(state, payload) {
    state.yourProperty = payload;
  }
}
    • 在组件中通过mapMutations或this.$store.commit调用。

  3. 使用计算属性的setter： 在组件中，通过计算属性的getter和setter来代理Vuex状态，setter中提交mutation：

    computed: {
  myState: {
    get() {
      return this.$store.state.myState;
    },
    set(value) {
      this.$store.commit('updateMyState', value);
    }
  }
}
回到顶部