Лабораторна робота №6. Vuex.

Тема: Vuex

Vuex - це бібліотека для управління станом, яку зазвичай використовують з Vue.js для керування станом вашого додатку. При роботі з аутентифікованими користувачами в додатку Vue.js ви можете використовувати Vuex для збереження та керування статусом аутентифікації користувача та пов'язаними даними. Ось загальна інструкція щодо налаштування Vuex для збереження аутентифікованого користувача:

  1. Встановіть Vuex: Якщо ви цього ще не зробили, переконайтеся, що ви встановили Vuex в своєму проекті Vue.js.

    npm install vuex

  2. Створіть сховище Vuex: У вашому проекті створіть сховище Vuex. Сховище буде містити стан аутентифікації користувача та пов'язані дані.

    // store.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    user: null, // Тут буде зберігатися аутентифікований користувач
    isAuthenticated: false // Це можна використовувати для перевірки статусу аутентифікації користувача
  },
  mutations: {
    SET_USER(state, user) {
      state.user = user
      state.isAuthenticated = !!user
    },
    LOGOUT(state) {
      state.user = null
      state.isAuthenticated = false
    }
  },
  actions: {
    loginUser({ commit }, user) {
      commit('SET_USER', user)
    },
    logoutUser({ commit }) {
      commit('LOGOUT')
    }
  }
})

export default store

  3. Налаштуйте дії та мутації: У вашому сховищі Vuex ви можете визначити мутації для встановлення користувача, коли вони входять в систему, та для їх виходу. Ви також можете визначити дії, які викликають ці мутації.

  4. Використовуйте Vuex у ваших компонентах: У компонентах Vue.js ви можете використовувати mapState, mapMutations та mapActions для взаємодії з сховищем Vuex.

    <!-- Example.vue -->

<template>
  <div>
    <p v-if="isAuthenticated">Привіт, {{ user.name }}</p>
    <button @click="login">Увійти</button>
    <button @click="logout">Вийти</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['user', 'isAuthenticated'])
  },
  methods: {
    ...mapActions(['loginUser', 'logoutUser']),
    login() {
      const user = { name: 'Джон Доу' } // Замініть це на фактичні дані користувача
      this.loginUser(user)
    },
    logout() {
      this.logoutUser()
    }
  }
}
</script>

  5. Потік аутентифікації: Вам слід замінити дані прикладного користувача в методі login на фактичну логіку аутентифікації. Це може включати в себе виконання запитів API для аутентифікації користувача і потім виклик loginUser з даними аутентифікованого користувача.

  6. Захист маршрутів: Ви можете використовувати стан isAuthenticated у вашому сховищі Vuex для захисту певних маршрутів або компонентів, які вимагають аутентифікації.

Це базова настройка використання Vuex для збереження аутентифікованого користувача в додатку Vue.js. Залежно від складності та вимог вашого додатку, вам може знадобитися подальше розширення, таке як робота з токенами, ролями користувачів чи даними користувача.

Завдання

До попередньої роботи додати використання Vuex. Та зберігати у сторі дані поточного користувача.