🤔 Как взаимодействовать с vuex js?

Vuex — это централизованное хранилище для управления состоянием в приложениях Vue.js. Оно используется, когда несколько компонентов нуждаются в доступе к общему состоянию.

🟠Подключение Vuex в проект
Сначала установим Vuex, если он ещё не установлен:

npm install vuex

Теперь создадим хранилище (store)

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
});

Затем подключаем это хранилище в main.js

import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

new Vue({
  store, // Подключаем Vuex-хранилище
  render: h => h(App)
}).$mount('#app');

🟠Доступ к данным из Vuex (state)
Чтобы получить данные из хранилища (state), можно использовать this.$store.state или mapState.

<template>
  <div>
    <p>Счетчик: {{ $store.state.count }}</p>
  </div>
</template>

С использованием mapState

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

export default {
  computed: {
    ...mapState(['count'])
  }
};
</script>

🟠Изменение состояния (mutations)
В Vuex нельзя изменять state напрямую, для этого используются mutations.

<template>
  <button @click="$store.commit('increment')">Увеличить</button>
</template>

Или с помощью mapMutations

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

export default {
  methods: {
    ...mapMutations(['increment'])
  }
};
</script>

<template>
  <button @click="increment">Увеличить</button>
</template>

🟠Асинхронные действия (actions)
Мутации не поддерживают асинхронные операции, поэтому для этого используются actions.

<template>
  <button @click="$store.dispatch('incrementAsync')">Увеличить через 1 сек</button>
</template>

Или с mapActions

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

export default {
  methods: {
    ...mapActions(['incrementAsync'])
  }
};
</script>

<template>
  <button @click="incrementAsync">Увеличить через 1 сек</button>
</template>

🟠Использование геттеров (getters)
Геттеры работают как вычисляемые свойства (computed), позволяют получать обработанные данные из state.

<template>
  <p>Удвоенный счетчик: {{ $store.getters.doubleCount }}</p>
</template>

Или с mapGetters

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

export default {
  computed: {
    ...mapGetters(['doubleCount'])
  }
};
</script>

<template>
  <p>Удвоенный счетчик: {{ doubleCount }}</p>
</template>

🟠Модули Vuex (для больших проектов)
Если приложение большое, можно разделить Vuex-хранилище на модули:

const counterModule = {
  state: () => ({ count: 0 }),
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
};

export default new Vuex.Store({
  modules: {
    counter: counterModule
  }
});

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как настраивать собственную кастомизацию форм?

Можно использовать стили для стандартных элементов формы, применять псевдоэлементы, использовать кастомные компоненты на основе div и JavaScript. Также часто подключают библиотеки или UI-фреймворки.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Когда используются теги div и span?

<div> и <span> — это самые универсальные HTML-теги, но у них разные роли:
<div> — блочный контейнер (для структуры).
<span> — строчный контейнер (для оформления текста).

🚩Примеры использования `<div>`

Разметка секций страницы

<div class="header">Навигация</div>
<div class="content">Основной контент</div>
<div class="footer">Подвал</div>

Группировка элементов

<div class="card">
  <h2>Заголовок</h2>
  <p>Текст внутри карточки</p>
</div>

🚩Когда использовать `<span>`?

<span> используется для выделения части текста или небольших элементов. Это строчный элемент, который не переносится на новую строку.

🚩Примеры использования `<span>`

Выделение части текста

<p>Сегодня <span class="highlight">солнечная погода</span>.</p>

Иконки, кнопки и маленькие элементы

<button>
  <span class="icon">🔍</span> Поиск
</button>

Ставь 👍 и забирай 📚 Базу знаний

🤔 Как отрисовать компонент по условию?

Используют директивы:
• v-if — компонент вообще не создаётся, если условие ложное.
• v-show — компонент всегда в DOM, но просто скрывается через CSS (display: none).
• Можно также использовать тернарный оператор прямо в шаблоне (v-bind:is, component, slot и т.п.).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний