在观察者中出现 Vuex 错误，但我没有使用 Vuex [Nuxt]

Posted 2023-02-23

【中文标题】在观察者中出现 Vuex 错误，但我没有使用 Vuex [Nuxt]

【英文标题】：Getting Vuex error in watcher but I'm not using Vuex [Nuxt]

【发布时间】：2021-06-16 04:51:38

【问题描述】：

当我选择绑定到一个 v 模型：

<v-col v-for="(item, i) in searchModule.allHeaders" :key='i' cols='2'>
<v-checkbox
  v-model='selectedColumnHeaders'
  :label="item.text"
  :value="item"
  color="primary"
  hide-details
></v-checkbox>
</v-col>

我试图在 Vue 观察程序中执行此操作，因此当我选中或取消选中时数组更改时，我会更新数组对象属性，但是当我尝试执行此操作时，我收到了这个奇怪的 Vuex 错误！而且我什至没有在这里使用 Vuex！这是一个框架错误还是我误解了观察者的工作方式？顺便说一句，我正在使用 Nuxt。

这是我在观察者中的代码：

watch: 
        // columns for table regen
        selectedColumnHeaders(newVal, oldVal) 
            /*
            This is how we change the header's active status, by default some are active and some aren't, 
            but when a user checks the check box to regenerate a table, we need to change these active key-value pairs, we do it here.
            */
            if (newVal !== oldVal) 
                this.selectedColumnHeaders.map((header) => 
                    (header.active === false) ? header.active = true : null;
                );
            
        
    ,

当我点击创建 Vue 实例时已经检查的标题时它可以工作（[ text: 'some text' value: 'some value, active: true , etc..]），但是当我点击在创建 Vue 实例时 active 属性为 false 的复选框上，我收到此错误：

“错误：[vuex] 不在突变处理程序之外改变 vuex 存储状态。”

这个组件或父组件中没有Vuex！ （它存在于应用程序的其他地方），但我正在“变异”的数据不在商店中......非常困惑，感谢任何帮助

【参考方案1】：

如果其他人遇到这个问题，我通过在我的 /store/index.vue 中添加“export const strict = false”来解决它，不知道为什么这会触发 Vuex，但确实是这样，这解决了错误。

【讨论】：

严格模式实际上是为了防止变量的可变性。所以是的..您可以禁用它，但实际上不应禁用它，因为它可以帮助您编写更好的代码。如果您不想再出现此错误，请不要改变您的对象（例如克隆它们并编辑副本）。

@kissu 是的，它被使用所以人们不会直接改变 Vuex 状态，我认为这绝对是更好的代码，问题是我在这里没有使用 Vuex，我正在尝试改变本地未连接到 Vuex 的状态，因此我感到困惑和沮丧

可能是因为 Vue 检测到这种突变的方式，触发警告的方式可能没有区别。即便和 Vuex 相关，也适用于某些情况。