Блог

Главная - Вопросы по программированию - VueJS 3 с Vuex 4: состояние не обновляется

VueJS 3 с Vuex 4: состояние не обновляется

#vue.js #axios #vuejs3 #vuex4

#vue.js #axios #vuex #vuejs3 #vuex4

Вопрос:

Я новичок в VueJS и пытаюсь создать динамику submenu в компоненте «Заголовок».

App.vue

 <template>
    <div>
        <Header />

        <router-view />

        <Footer />
    </div>
</template>

Я использую хранилище, Vuex чтобы установить глобальное состояние для своих submenu элементов

store/index.js:

 import { createStore } from 'vuex'

export default createStore({
    state: {
        cats_sub_menu: []
    },

    mutations: {
        SET_SUB_MENU(state, payload) {
            state.cats_sub_menu = payload;
       }
    },

   actions: {
       setSubMenu({ commit }, payload) {
          commit("SET_SUB_MENU", payload)
       }
   },
})

И я настроил свой компонент заголовка:

 <template>
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <router-link class="navbar-brand" to="/">Test Website</router-link>
            <button
                class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="Toggle navigation"
            >
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li>
                        <router-link
                            class="nav-link"
                            active-class="active"
                            to="/page/about-us"
                            >About</router-link
                        >
                    </li>
                    <li class="nav-item dropdown">
                        <a
                            class="nav-link dropdown-toggle"
                            href="#"
                            id="navbarDropdown"
                            role="button"
                            data-toggle="dropdown"
                            aria-haspopup="true"
                            aria-expanded="false"
                        >
                            Blog
                        </a>
                        <div
                            class="dropdown-menu"
                            aria-labelledby="navbarDropdown"
                        >
                            <router-link
                                class="dropdown-item"
                                active-class="active"
                                v-for="{ blogCat, i } in blog_sub_menu"
                                :key="i"
                                to="blog"
                                >{{ blogCat.title_el }}</router-link
                            >
                        </div>
                    </li>
                    <li>
                        <router-link
                            class="nav-link"
                            active-class="active"
                            to="/page/contact"
                            >Contact</router-link
                        >
                    </li>
                </ul>
            </div>
        </nav>
    </header>
</template>


<script>
    import { computed } from "vue";
    import axios from "axios";
    import store from "../../../store";
    export default {
        name: "Header",
        setup() {
            function setSubCatsMenu() {
                axios
                    .get(`http://127.0.0.1:5000/api/blog_category`)
                    .then((response) =>
                        store.dispatch("setSubMenu", response.data)
                    );
            }
            const blog_sub_menu = computed(() => store.state.cats_sub_menu);
            return {
                store,
                blog_sub_menu,
                setSubCatsMenu,
            };
        },
        mounted() {
            this.setSubCatsMenu();
        },
    };
</script>

Я проверил вызов api на его действительность без каких-либо проблем, но все равно blog_sub_menu не обновляется. У кого-нибудь есть какие-либо идеи?

Приветствия!

Ответ №1:

blog_sub_menu должно быть вычисляемым свойством, чтобы быть реактивным :

 import axios from "axios";
import store from "../../../store";   
import {computed} from "vue"
export default {
    name: "Header",
    setup() {
        function setSubCatsMenu() {
            axios
               .get(`http://127.0.0.1:5000/api/blog_category`)
               .then((response) =>
                (store.dispatch("setSubMenu", response.data))
            );
        }

        const blog_sub_menu =computed(()=> store.state.cats_sub_menu);

        return {
            store,
            blog_sub_menu,
            setSubCatsMenu,
        };
    },
    mounted() {
        this.setSubCatsMenu();
        this.blog_sub_menu = store.state.cats_sub_menu;
    },
};

и ваш v-for должен быть таким :

  v-for="( blogCat, i ) in blog_sub_menu"

Комментарии:

1. Спасибо за ваш ответ @Boussadjra-Brahim, но я уже пробовал это. это выдает мне ошибку «blogCat не определен», когда я пытаюсь выполнить цикл через cats_sub_menu: (

2. ДА. Извините, что не поделился ранее. Я обновил код компонента заголовка в своем вопросе.

3. Попробуйте это const blog_sub_menu = computed(() =>( store.state.cats_sub_menu || [])); , потому что при первом отображении store.state.cats_sub_menu значение не определено

4. К сожалению, не работает. Я даже передал статические данные при объявлении, и все же я получаю сообщение об ошибке «blogCat не определен»

5. ах, хорошо, я понимаю вашу ошибку, вы должны заменить {} на () в v-for="{ blogCat, i } in blog_sub_menu" нем должно быть v-for="( blogCat, i ) in blog_sub_menu"