SFC Vue3 Компоненты в Bitrix, с использованием Composition API, без сборщиков, без CDN и NPM пакетов31.03.2024 10:46

А теперь самый крутой вариант. Буквально NEXT GEN

Раз мы все равно написали свой компонент. тк как нативные компоненты bitrix работают без Vue. Предлагаю переходить от component.php, к class.php

Чтобы прям совсем круто было.

Создаем с нуля наш компонент и пишем его на class.php, и делаем ± что то посложнее чем реактивные таймеры.

TEMPLATE.PHP

    

        {{ user }}
        Удалить пользователя
    
    

        

            Имя пользователя
            
        
        Добавить нового пользователя
    

Создаем наш темплейт, с логикой Vue, в данном примере будет пример добавления пользователя и удаление пользователя (не из базы данных, а из массива в классе, но вы же умные — все сможете подстроить под себя)

Немного добавим стилей в style.css, чтобы все убедились что стили работают

.users-list {
    padding: 12px;
}
.users-list__item {
    padding: 12px;
    background-color: #e2e2e2;
    border-radius: 4px;
    margin-bottom: 8px;
}

Далее переходим к самому интересному

CLASS.PHP

 1,
            'name' => 'Alexander',
        ],
        [
            'id' => 2,
            'name' => 'Ivan',
        ],
        [
            'id' => 3,
            'name' => 'Sergey',
        ],
        [
            'id' => 4,
            'name' => 'Smith',
        ],
        [
            'id' => 5,
            'name' => 'John'
        ],
    ];
    public function configureActions(): array
    {
        return [];
    }

    public function deleteUserAction($id): array
    {
        foreach (self::$users as $key => $user) {
            if ($user['id'] == $id) {
                unset(self::$users[$key]);
                break;
            }
        }
        return self::$users;
    }

    public function getUsersAction(): array
    {
        return self::$users;
    }

    public function addUserAction(): array
    {
        $lastUser = end(self::$users);
        $newUser = [
            'id' => $lastUser['id'] + 1,
            'name' => $_POST['name'],
        ];
        self::$users[] = $newUser;
        return self::$users;
    }

    public function executeComponent(): void
    {
        $this->includeComponentTemplate();
    }
}

Тут все просто подключаем наш Vue, далее создаем класс и наследуемся от стандартного CBitrixComponent и реализуем интерфейс чтобы наш класс был контролируемым и мы могли работать с ним через BX.ajax.runComponentAction, чтобы не выходить за пределы компонента и создаем массив пользователей с которым будем работать. Далее переходим к скрипту.

SCRIPT.JS

const { runComponentAction } = BX.ajax;
const { ref, createApp, reactive } = BX.Vue3;
BX.ready(() => {
  createApp({
    setup() {
      function deleteUser(id) {
        const request = runComponentAction("test:test", "deleteUser", {
          mode: "class",
          data: { id: id },
        });
        request.then((reponse) => arResult.users = reponse.data);
      }

      function addUser(e) {
        e.preventDefault();
        const request = runComponentAction("test:test", "addUser", {
          mode: "class",
          data: new FormData(e.target),
        });
        request.then((reponse) => arResult.users = reponse.data);
      };

      const arResult = reactive({});
      const request = runComponentAction("test:test", "getUsers", {
        mode: "class",
      });
      request.then((reponse) => (arResult.users = reponse.data));

      return {
        arResult,
        addUser,
        deleteUser
      };
    },
  }).mount("#users-list");
});

Далее тут все просто, берем создаем наше Vue приложение, создаем нужные нам объекты, переменные, функции и работаем с ними.

В самом начале создаем реактивный объект arResult в который будем помещать наши другие массивы, или объекты, данный объект будет отслеживать изменения в нем и менять страницу в соответствии с нашей логикой в template.php.

Вот что должно было у нас получится на странице.

Соответственно нажимая на кнопку удалить пользователя, он удалится у нас на странице, если добавить, то пользователь добавиться. Только из за того что мы удаляем из статичного массива, при добавлении после удалении пользователя, мы все равно получим пользователя которого удалили (ну как бы из кода понятно).

Примеров можно придумать уйму как с этим работать, в любом случае стоит отметить что это довольно удобно и быстро.

Так же для удобства можно подключить VueDev Tools они так же довольно удобно подключаются из коробки.

Выводы

SFC компоненты очень удобно разрабатывать, до SPA вряд ли такими темпами дойдем, нужно ждать более лучшую интеграцию, либо использовать Bitrix как API и не парится, но если такого варианта нет. То данный способ очень не плох.

Преимущества:

1. Не нужно настраивать package.json, устанавливать node и node_modules в Bitrix, все реализовано «нативными средствами»

2. Не нужно знать Bitrix CLI для того чтобы создавать свой экстенешн в котором будет Vue приложение.

3. Верстка template размещается не в JS, её рендерит сервер, а значит если у вас есть какой то текст то страница в теории не будет помечена ботом как пустая

4. Есть возможность использовать COMPOSITION API, которая является более производительной чем предыдущая API + кода стало меньше, и он стал более читаемый

Недостатки:

1. Вряд ли получится создать отдельно другой маленький компонент и использовать его.

2. Не получится сделать адекватное SPA приложение. (Ну вернее можно, но не захочешь)

Как по мне вышло не плохо

© Habrahabr.ru