Как только я добавляю "реквизиты" к компоненту, который я получаю: Ошибка в обратном вызове для наблюдателя "function () {return this._data. $$ state}"

Question

Я получаю очень странную ошибку, которую не могу найти.

[Vue warn]: ошибка в обратном вызове для наблюдателя "function () {return this._data. $$ state } ":" Ошибка: [vuex] не изменяет состояние хранилища vuex вне обработчиков мутаций. "

Я использую vuex в строгом режиме. Несмотря на ошибку, я не изменяю состояние хранилища vuex вне обработчиков мутаций. Компонент вообще не использует vuex. Я создал тестовый компонент, который не использует ничего подобного ниже.

<template>
  <div>
    TEST COMPONENT
  </div>
</template>  
<script>
export default {
  name: 'testComponent',
  props: ['testProp'],
}
</script>

Как только я добавляю реквизитную часть, я получаю ошибку. Я не могу представить весь проект здесь или воспроизвести его. Но в этом нет ничего особенного.

Answer 1

Ну, после некоторой отладки я обнаружил, что это на самом деле вызвано vuex и vue -router.

На самом деле я мог бы найти это раньше, если бы просто детально изучил след ошибки. Секция vue-router.esm.js?8c4f:2279 давала подсказку, но я ее не видел (мне кажется, что у меня нет опыта * 1018).

...
reactiveSetter  @   vue.runtime.esm.js?2b0e:1055
normalizeProps  @   vue.runtime.esm.js?2b0e:1449
mergeOptions    @   vue.runtime.esm.js?2b0e:1521
Vue.extend  @   vue.runtime.esm.js?2b0e:5159
extractGuard    @   vue-router.esm.js?8c4f:2279
eval    @   vue-router.esm.js?8c4f:2263
eval    @   vue-router.esm.js?8c4f:1968
eval    @   vue-router.esm.js?8c4f:1968
...

Я получал маршруты из магазина и добавлял (addRoutes () ) их к маршруту.

router.beforeEach((to, from, next) => {
...
    router.addRoutes([store.getters['route/getRoute']]);
...
}

Но из-за того, что он был передан по ссылке (и я думаю, что маршрутизатор вносил в него некоторые изменения), ошибка возрастала. Маршрут пытался «мутировать хранилище vuex за пределами хранилища мутаций»

[Vue warn]: Error in callback for watcher "function () { return 
this._data.$$state }": "Error: [vuex] do not mutate vuex store state outside 
mutation handlers."

Я решил это путем глубокого клонирования (как показано ниже) с loda sh, но мог также использовать другое глубокое клонирование.

let routeDeepClone = _.cloneDeep([store.getters['route/getRoute']]);
router.addRoutes(routeDeepClone);

Теперь это работает очень хорошо. Надеюсь, это кому-нибудь поможет.