VueJS 3与Vuex 4：状态未更新

问题描述

我是vueJS的新手，我正在尝试在'Header'组件中创建动态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)
       }
   },})

然后我设置了Header组件：

<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仍未更新。有人有什么想法吗？

干杯！

解决方法

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"