Nuxt.js搭配Vuex开发时选择日期触发非mutation修改store状态报错排查

报错根因 #

• 该报错并非来自你主动编写的越权修改代码，触发源是Bootstrap Vue 的 <b-form-datepicker> 组件的内部实现逻辑与当前store绑定方式的冲突。
• 你在chartDataFrom、chartDataTo计算属性的getter中，直接返回了store里state.beta_trend.from、state.beta_trend.to的原始引用，没有做独立值拷贝。
• <b-form-datepicker> 在拿到绑定的日期值后，不会创建独立副本，而是直接对传入的Date类型引用做内部属性修改（比如初始化格式转换、交互过程中的实时值更新），这步修改完全发生在Vuex mutation流程之外，直接改动了store存储的原始state对象，因此触发严格模式告警。
• 你的action逻辑进一步放大了这个问题：首次接口返回数据后，代码直接将data.dates数组中的元素赋值给state.from、state.to，这些值本身就是和接口响应对象绑定的引用，被datepicker拿到后会直接被篡改。

修复步骤 #

1. 调整对应计算属性的getter返回逻辑，不直接返回store的原始引用，每次返回时生成独立的日期副本，切断组件和store原始值的引用关联：
   原代码示例：

   chartDataFrom: {
     get () {
       return this.$store.state.beta_trend.from
     },
     set (value) {
       this.$store.commit('beta_trend/SET_FROM', value)
       this.$fetch()
     }
   }
   

   修改后的代码：

   chartDataFrom: {
     get () {
       const rawValue = this.$store.state.beta_trend.from
       // 生成独立的Date副本返回，避免组件直接修改原始引用
       return rawValue ? new Date(rawValue) : null
     },
     set (value) {
       this.$store.commit('beta_trend/SET_FROM', value)
       this.$fetch()
     }
   }
   

   对chartDataTo计算属性做相同的调整。
2. 配套优化action中的赋值逻辑，给state赋初始日期值时，也不直接引用接口返回的数组元素，同步做值拷贝，从根源上避免引用关联。

按照上述调整后，不需要关闭Vuex严格模式，datepicker的内部修改只会作用在你生成的独立副本上，不会触碰store的原始state，报错就会完全消失，现有功能逻辑不会受到任何影响。

内容的提问来源于stack exchange，提问作者Depka