Локальное состояние компонентов

В Element Plus, как и в любом современном фреймворке на основе Vue 3, локальное состояние компонентов играет ключевую роль для создания интерактивного и реактивного интерфейса. Локальное состояние — это данные, которые живут внутри компонента и напрямую влияют на его поведение и визуальное отображение.

Определение и реактивность состояния

В Vue 3 для создания локального состояния компонента используется Composition API:

import { ref, reactive, computed } from 'vue';

export default {
  setup() {
    const count = ref(0); // примитивное состояние
    const form = reactive({
      username: '',
      password: ''
    }); // объект состояния

    const isValid = computed(() => form.username.length > 0 && form.password.length > 0);

    function increment() {
      count.value++;
    }

    return {
      count,
      form,
      isValid,
      increment
    };
  }
};
  • ref создаёт реактивное примитивное значение.
  • reactive используется для объектов и массивов, делая их свойства реактивными.
  • computed создаёт вычисляемое значение на основе других реактивных данных.

В Element Plus часто используется именно такой подход для управления формами, таблицами и другими интерактивными элементами.

Локальное состояние форм

Компоненты формы в Element Plus, такие как <el-form> и <el-form-item>, активно используют локальное состояние для управления валидацией и пользовательским вводом.

<template>
  <el-form :model="form" :rules="rules" ref="loginForm">
    <el-form-item label="Username" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="Password" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">Login</el-button>
  </el-form>
</template>

<script>
import { reactive, ref } from 'vue';
export default {
  setup() {
    const form = reactive({
      username: '',
      password: ''
    });

    const rules = {
      username: [{ required: true, message: 'Введите имя пользователя', trigger: 'blur' }],
      password: [{ required: true, message: 'Введите пароль', trigger: 'blur' }]
    };

    const loginForm = ref(null);

    function submitForm() {
      loginForm.value.validate(valid => {
        if (valid) {
          console.log('Форма валидна:', form);
        } else {
          console.log('Ошибка валидации');
        }
      });
    }

    return {
      form,
      rules,
      loginForm,
      submitForm
    };
  }
};
</script>

Особенности локального состояния форм:

  • v-model обеспечивает двухстороннюю связь между полем ввода и локальным состоянием.
  • ref позволяет получить доступ к методам компонента <el-form>, таким как validate() и resetFields().
  • Состояние формы локализовано внутри компонента и не зависит от глобального хранилища.

Локальное состояние таблиц

Компонент <el-table> часто использует локальные массивы данных для управления строками, фильтрацией и пагинацией:

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="age" label="Age" width="100"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const tableData = reactive([
      { name: 'John', age: 28, address: 'New York' },
      { name: 'Jane', age: 32, address: 'London' },
      { name: 'Tom', age: 25, address: 'Paris' }
    ]);

    return {
      tableData
    };
  }
};
</script>
  • Изменение элементов массива через реактивный объект автоматически обновляет таблицу.
  • Локальное состояние таблицы позволяет управлять сортировкой, фильтрацией и выбранными строками без глобальных эффектов.

Управление модальными окнами

Компоненты <el-dialog> и <el-drawer> используют локальное состояние для управления видимостью:

<template>
  <el-button @click="dialogVisible = true">Open Dialog</el-button>
  <el-dialog v-model="dialogVisible" title="Demo Dialog">
    <p>Содержимое диалога</p>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">Закрыть</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const dialogVisible = ref(false);

    return {
      dialogVisible
    };
  }
};
</script>
  • v-model синхронизирует видимость диалога с локальным состоянием dialogVisible.
  • Локальное состояние позволяет открывать несколько диалогов независимо друг от друга.

Взаимодействие с компонентами управления состоянием

Даже если приложение использует глобальные решения (например, Pinia или Vuex), локальное состояние остаётся важным для изоляции компонентов:

  • Управление loading состояния кнопок или индикаторов прогресса.
  • Локальные фильтры и сортировка в таблицах без сохранения состояния в глобальном хранилище.
  • Управление временными формами и диалогами.

Практические рекомендации

  1. Использовать ref для примитивов и reactive для объектов и массивов.
  2. Вычисляемые свойства (computed) помогают автоматически обновлять зависимости без ручного вмешательства.
  3. Минимизировать зависимость от глобального состояния, чтобы компоненты оставались самодостаточными.
  4. Использовать ref на компонентах Element Plus, чтобы получать доступ к методам для валидации, сброса или управления поведением.
  5. Изолировать локальные состояния: каждая форма, таблица или диалог должны иметь собственное состояние, чтобы избежать конфликтов и непредвиденного поведения.

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

Оглавление