VueJS 3(Vuex 4 포함): 상태가 업데이트되지 않음

VueJS 3(Vuex 4 포함): 상태가 업데이트되지 않음

나는 VueJS를 처음 접하고 역동적인 것을 만들려고 노력하고 있다.submenu'헤더' 구성 요소에서

앱뷰

<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 call에서 문제없이 유효성을 확인했지만 여전히 유효하다.blog_sub_menu업데이트되지 않음.누구 아이디어 있는 사람?

건배!

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"

참조URL: https://stackoverflow.com/questions/64572947/vuejs-3-with-vuex-4-state-is-not-updating