Почему VueDevtools не видит Vuex?

Question

[Александр Маджугин]

Сабж. Хранилище есть работает, но VueDevtools не видит его как будто его нет.

Приходится в одном из компонентов делать:

computed: {
		store_mirror() {
			return this.$store.state;
		},
...

Чтобы хотя бы видеть состояние.

P.S.
Просьба не убирать тег Битрикс, потому что речь и vue и vuex подключенных из ядра, а не ванильных.

Comments

[Sergey]

Как вы подключаете Vue и свой экстеншн на странице? Vuex подключается через экстеншн или также на рабочей странице?

[Александр Маджугин]

Sergey, все подключается эксейшенами битрикс в пространстве BX
Раньше никогда проблем не было.
типа код хранилища:

//import createMutationsSharer from "vuex-shared-mutations";
//import {Vue} from 'ui.vue';
import {Vuex} from 'ui.vue.vuex';


let storeData = {
    // какие-то данные
};



const store = Vuex.store(
{
    strict: true, //storeData.config?.env?.stage == 'dev',
    debug: true, //storeData.config?.env?.stage == 'dev',
    state: Object.assign({
            // собственные состояния
        }, storeData),

    
    actions: {
        // какие-то экшенры
    },
    
    mutations: {
        // какие-то мутации
    },
    
    
    //plugins: [createMutationsSharer({ predicate: ['update'] })]
});

//
store.dispatch('init');
export {store};

Копипаста с другого проекта+- и там таких проблем не было. Но сейчас он мне недоступен чтобы проверить

[Sergey]

Александр Маджугин, ответил в секции ответа, считаю в определении константы VUEJS_DEBUG решение

Answer 1

[Sergey]

На странице где подключается Vue/Vuex нужно определить константу VUEJS_DEBUG

Пример:

<?php

const VUEJS_DEBUG = true;

use Bitrix\Main\UI\Extension;

/* @global CMain $APPLICATION */

require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/header.php");

Extension::load("ui.vue");
Extension::load('sergey.mymodule.isthebest');
?>
<section>
    <div id="mymodule"></div>
    
    <script>
        BX.ready(function() {
          BX.Vue.create({
            el: '#mymodule',
            template: `<mymodule-isthebest />`
          })
        })
    </script>
</section>

<?php
require($_SERVER["DOCUMENT_ROOT"] . "/bitrix/footer.php");

Comments

[Александр Маджугин]

Sergey, ну это было бы слишком просто. И тогда бы вопрос не содержал информации о том что пне приходится все хранилище сунуть в компонент, чтобы наблюдать его, так как если бы VUEJS_DEBUG не была задана, то и компоненты я был не видел в инспекторе.

[Sergey]

Александр Маджугин, мне вот не хватает вводных данных.
Попробуйте на странице где подключается vue компонент указать и константу VUEJS_DEBUG, а также чтобы были эти строки:

use Bitrix\Main\UI\Extension;
Extension::load("ui.vue");
Extension::load("ui.vue.vuex");

Как вы инициализируете store? Так: let store = BX.Vuex.store({}) ?

[Александр Маджугин]

Sergey, ответил же в комментариях к вопросу. Прямо код стора привел - как и всегда раньше:

import {Vuex} from 'ui.vue.vuex';
const store = Vuex.store()
export {store};

Естественно ui.vue и ui.vue.vuex подключены - как бы работало оно тогда?

Функционально все пашет. Девтул видит компоненты. Девтул только стор не видит.

[Sergey]

Александр Маджугин, ладно, допустим у вас все подключено правильно и константы для включения отладки все установлены. Какая версия Vuex используется? Если, например 4.0, то у этой версии были проблемы с отображением отладочной информации, надо обновить. Также у Битрикса недавно были обновления для Vue, Vuex - тоже бы обновить