Интеграция с Vuex

Для интеграции Element Plus с приложением на Vue 3 и управлением состоянием через Vuex, необходимо обеспечить корректное подключение компонентов библиотеки и их реактивное взаимодействие с хранилищем.

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

const app = createApp(App);
app.use(store);
app.use(ElementPlus);
app.mount('#app');

Важно убедиться, что store и ElementPlus зарегистрированы до монтирования приложения, иначе реактивность компонентов к состоянию Vuex может не работать.

Работа с формами и состоянием Vuex

Element Plus предоставляет широкий спектр компонентов для форм: ElInput, ElSelect, ElSwitch, ElCheckbox, ElRadio. Для их интеграции с Vuex используют двухстороннюю привязку через v-model или события update:modelValue.

Пример интеграции ElInput с Vuex:

<template>
  <el-form>
    <el-form-item label="Имя пользователя">
      <el-input
        v-model="username"
        placeholder="Введите имя"
      ></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const username = computed({
      get: () => store.state.user.name,
      set: value => store.commit('user/setName', value)
    });

    return { username };
  }
};
</script>

Ключевые моменты:

  • Используется computed property для синхронизации состояния компонента с Vuex.
  • Мутации Vuex обеспечивают централизованное управление состоянием.

Работа с селектами и выпадающими списками

Компоненты ElSelect и ElOption позволяют динамически отображать данные из хранилища:

<template>
  <el-select v-model="selectedRole" placeholder="Выберите роль">
    <el-option
      v-for="role in roles"
      :key="role.id"
      :label="role.name"
      :value="role.id"
    ></el-option>
  </el-select>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const roles = computed(() => store.state.user.roles);

    const selectedRole = computed({
      get: () => store.state.user.selectedRole,
      set: value => store.commit('user/setSelectedRole', value)
    });

    return { roles, selectedRole };
  }
};
</script>

Особенности:

  • Динамическая генерация опций через v-for.
  • Привязка выбранного значения к Vuex обеспечивает реактивность всего приложения.

Использование кнопок и действий через Vuex

Компонент ElButton часто используется для запуска действий Vuex, таких как асинхронные операции:

<template>
  <el-button type="primary" @click="saveUser">Сохранить</el-button>
</template>

<script>
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const saveUser = () => {
      store.dispatch('user/saveUserData');
    };

    return { saveUser };
  }
};
</script>

Рекомендации:

  • Для изменения состояния, которое требует асинхронной логики, используют actions.
  • Простые синхронные изменения делаются через mutations.

Связывание Element Plus таблиц с Vuex

Компонент ElTable позволяет напрямую отображать данные из хранилища:

<template>
  <el-table :data="users" style="width: 100%">
    <el-table-column prop="id" label="ID" width="80"></el-table-column>
    <el-table-column prop="name" label="Имя"></el-table-column>
    <el-table-column prop="email" label="Email"></el-table-column>
  </el-table>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const users = computed(() => store.state.user.list);

    return { users };
  }
};
</script>

Особенности:

  • Любые изменения в массиве list Vuex автоматически обновляют таблицу.
  • Можно использовать пагинацию и сортировку, управляемые через состояние Vuex.

Работа с модальными окнами и диалогами

Компонент ElDialog удобно управлять через Vuex, чтобы централизовать состояние видимости:

<template>
  <el-dialog
    title="Редактирование пользователя"
    :visible.sync="isDialogVisible"
  >
    <p>Форма редактирования</p>
  </el-dialog>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();

    const isDialogVisible = computed({
      get: () => store.state.ui.isUserDialogVisible,
      set: value => store.commit('ui/setUserDialogVisible', value)
    });

    return { isDialogVisible };
  }
};
</script>

Ключевые моменты:

  • Использование :visible.sync совместно с Vuex позволяет контролировать открытие и закрытие диалогов в разных компонентах.
  • Централизованное управление состоянием UI упрощает масштабирование приложения.

Интеграция уведомлений и сообщений

Компоненты ElMessage и ElNotification удобно использовать через Vuex actions:

// store/ui.js
actions: {
  notifySuccess({ commit }, message) {
    commit('showNotification', { type: 'success', message });
  }
}

// компонент
import { ElNotification } from 'element-plus';
import { useStore } from 'vuex';

const store = useStore();

const notify = () => {
  store.dispatch('ui/notifySuccess', 'Данные успешно сохранены');
};

Особенности:

  • Vuex acts как посредник для вызова уведомлений из разных частей приложения.
  • Можно добавлять централизованную логику форматирования сообщений.

Рекомендации по организации

  • Компоненты Element Plus лучше всего связывать с Vuex через computed properties и mutations для синхронных изменений и actions для асинхронных.
  • Вложенные формы и сложные таблицы рекомендуется разделять на маленькие компоненты, каждый из которых напрямую взаимодействует с соответствующим модулем Vuex.
  • Для UI-состояния (Dialog, Loading, Notifications) создавать отдельный модуль Vuex, чтобы не смешивать данные и визуальное состояние.

Такая архитектура обеспечивает полную реактивность, предсказуемость и масштабируемость при использовании Element Plus в больших Vue-приложениях.

Оглавление