Frontend | Вопросы собесов

🤔 Расскажи о действиях в vuex

В Vuex (хранилище данных в Vue 2 и 3) actions используются для выполнения асинхронных операций, прежде чем изменить состояние (state).

🚩 Как работают actions?

🟠Определение action в `actions`
В actions передаётся объект context, из которого можно вызвать commit() для изменения state.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    asyncIncrement(context) {
      setTimeout(() => {
        context.commit("increment"); // Вызываем мутацию через 1 сек
      }, 1000);
    }
  }
});

🟠Как вызвать action?
Actions вызываются через dispatch(), а не commit().

store.dispatch("asyncIncrement");

🟠Actions с параметрами
Можно передавать параметры в dispatch(), чтобы использовать их внутри action.

actions: {
  asyncIncrement(context, payload) {
    setTimeout(() => {
      context.commit("increment");
      console.log("Задержка:", payload.delay);
    }, payload.delay);
  }
}

store.dispatch("asyncIncrement", { delay: 2000 });

🟠Возвращение `Promise` в actions
Если action должен дождаться завершения, можно вернуть Promise.

actions: {
  fetchData(context) {
    return fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(response => response.json())
      .then(data => {
        console.log("Данные получены:", data);
      });
  }
}

store.dispatch("fetchData").then(() => {
  console.log("Данные загружены!");
});

🟠Использование `async/await` в actions
Можно использовать async/await, чтобы код выглядел чище.

actions: {
  async fetchData(context) {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    console.log("Данные:", data);
  }
}

await store.dispatch("fetchData");
console.log("Данные загружены!");

🟠Actions могут вызывать другие actions
Если нужно выполнить несколько actions последовательно, можно вызывать один action внутри другого.

actions: {
  async firstAction(context) {
    console.log("Первый action выполнен");
  },
  async secondAction(context) {
    await context.dispatch("firstAction");
    console.log("Второй action выполнен");
  }
}

store.dispatch("secondAction");
// Выведет: "Первый action выполнен"
// Затем: "Второй action выполнен"

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

Please open Telegram to view this post

VIEW IN TELEGRAM

www.tg-me.com/us/Frontend | Вопросы собесов/com.easy_javascript_ru/1648

2.7K viewsJun 13 at 09:05

🤔 Расскажи о действиях в vuex

В Vuex (хранилище данных в Vue 2 и 3) actions используются для выполнения асинхронных операций, прежде чем изменить состояние (state).

🚩 Как работают actions?

🟠Определение action в `actions`
В actions передаётся объект context, из которого можно вызвать commit() для изменения state.

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    asyncIncrement(context) {
      setTimeout(() => {
        context.commit("increment"); // Вызываем мутацию через 1 сек
      }, 1000);
    }
  }
});

store.dispatch("asyncIncrement");

actions: {
  asyncIncrement(context, payload) {
    setTimeout(() => {
      context.commit("increment");
      console.log("Задержка:", payload.delay);
    }, payload.delay);
  }
}

store.dispatch("asyncIncrement", { delay: 2000 });

actions: {
  fetchData(context) {
    return fetch("https://jsonplaceholder.typicode.com/todos/1")
      .then(response => response.json())
      .then(data => {
        console.log("Данные получены:", data);
      });
  }
}

store.dispatch("fetchData").then(() => {
  console.log("Данные загружены!");
});

actions: {
  async fetchData(context) {
    const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
    const data = await response.json();
    console.log("Данные:", data);
  }
}

await store.dispatch("fetchData");
console.log("Данные загружены!");

actions: {
  async firstAction(context) {
    console.log("Первый action выполнен");
  },
  async secondAction(context) {
    await context.dispatch("firstAction");
    console.log("Второй action выполнен");
  }
}

store.dispatch("secondAction");
// Выведет: "Первый action выполнен"
// Затем: "Второй action выполнен"