VueJS 3 与 Vuex 4：状态未更新

Question

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

干杯！

Answer 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"

VueJS 3 与 Vuex 4：状态未更新

VueJS 3 with Vuex 4: State is not updating

vue.js

axios

vuex

vuejs3

vuex4