VueFrontend's questions

Eu uso o React e quero adicionar o título do filme no array, mas não consigo fazer isso e mostrar na interface do usuário. Por favor me ajude. Assisti a uma pergunta semelhante e, na minha opinião, não há resposta para minha pergunta. alerta, o trabalho está certo. mas useEffect sempre mostra uma matriz vazia. Observe meu código e escreva a resposta, por favor :)

import {useEffect, useState} from 'react';

import {OneFilm} from "./OneFilm";
import {Link} from 'react-router-dom';
import {Film} from "../../interfaces";
import styles from '../../css/AllFilms.module.css';


export function AllFilms() {
    const [allFilms, setAllFilms] = useState<Film[]>([]);
    const [selectedFilms, setSelectedFilms] = useState<string[]>([])

    const fetchFilms = async () => {
        try {
            const response = await fetch(`URL`, {
                headers: {
                    'X-API-KEY': process.env.REACT_APP_TOKEN
                }
            });
            const dataResp = await response.json();
            setAllFilms(dataResp);
        } catch (error) {
            console.error('Ошибка при получении фильмов:', error);
        }
    };

    const selectFilm = (filmTitle: string) => {
        alert(filmTitle)
        setSelectedFilms(prev => [...prev, filmTitle])
    }

    useEffect(() => {
        fetchFilms()
    }, [])

    useEffect(() => {
        console.log(selectedFilms)
    }, [selectedFilms])

    return (
        <div className={styles.container}>
            <ul className={styles.films}>
                {
                    allFilms.map((film) => (
                            <Link to={`/id=${film.id}`} key={film.id} onClick={() => selectFilm(film.name)}>
                                <OneFilm film={film}/>
                            </Link>
                        )
                    )}
            </ul>

            <div className="selected__films">
                <ul>
                    {selectedFilms.map((film) => (
                        <li>{film}</li>
                    ))}
                </ul>
            </div>
        </div>
    );
}

Talvez não funcione porque eu redireciono para outra página?

como, ao clicar no botão, uma ação foi enviada do vuex e igualar uma das propriedades dos dados a um getter do vuex ?

<template>
    <div id="app">
        <div class="btns">
            <button id="btn--send" @click="sendData">send data</button> 
            <button id="btn--clear" @click="cleanData">clean data</button> // This place
        </div>
     </div>
</template>

Meu Vuex:

export default {
    state: {
        dataSelect: ""
    },
    actions: {
        cleanData({commit}) {
            commit("clean")
        }
    },
    mutations: {
        clean(state) {
            state.dataSelect = ""
        }
    },
    getters: {
            DATA_SELECTED(state) {
            return state.dataSelect
        }
    }
}

Neste componente é necessário alterar os dados

<template>
    <div class="SelectFloors">
        <p id="title--choose">Выбранный этаж</p>
        <VueSimpleSelect
            @change="chooseFloor"
            :options="floors"
            v-model="selectedFloor"
            placeholder="Выберите этаж"
            class="sel__floor"
        />
    </div>
</template>

<script>
export default {
    name: "selectFloors",
    data() {
        return {
            floors: [
                {
                    label: 'floor 1',
                    value: 1
                },
                {
                    label: 'floor 2',
                    value: 2
                },
                {
                    label: 'floor 3',
                    value: 3
                },
            ],
            selectedFloor:''
        }
    },
    methods: {
        
    },
}
</script>

Neste componente é necessário quando pepson clicar no botão (no 1º componente) limpar os dados, this.selectedFloor need = ''

Como isso pode ser feito? Obrigado