Vue.js 带有Vuex 4的VueJS 3:状态未更新

我是vueJS新手，我正在尝试在“Header”组件中创建一个动态的

子菜单

App.vue



我使用存储从
Vuex
设置我的
子菜单
项的全局状态

store/index.js：

从“vuex”导入{createStore}
导出默认createStore({
声明：{
猫子菜单：[]
},
突变：{
设置子菜单（状态、有效载荷）{
state.cats_sub_菜单=有效载荷；
}
},
行动：{
setSubMenu（{commit}，有效负载）{
提交（“设置子菜单”，有效负载）
}
},
})

我设置了标题组件：


测试网站


关于


{{blogCat.title_el}}


接触


从“vue”导入{computed}；
从“axios”导入axios；
从“../../../store”导入存储；
导出默认值{
名称：“标题”，
设置（）{
函数setSubCatsMenu（）{
axios
.得到(`http://127.0.0.1:5000/api/blog_category`)
。然后（（响应）=>
store.dispatch（“setSubMenu”，response.data）
);
}
const blog_sub_menu=computed（（）=>store.state.cats_sub_menu）；
返回{
商店，
博客子菜单，
setSubCatsMenu，
};
},
安装的（）{
这个.setSubCatsMenu（）；
},
};

我检查了api调用的有效性，没有出现任何问题，但
blog\u子菜单
仍然没有更新。有人有什么想法吗

干杯
 
blog\u子菜单
应该是一个计算属性，以便响应：

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"

谢谢你的回答@Boussadjra Brahim，但我已经试过了。当我尝试循环遍历cats_sub_菜单时，它给了我一个错误“blogCat未定义”：（是的。很抱歉没有早些共享。我更新了问题中标题组件的代码。请尝试此
const blog_sub_菜单=computed（（）=>（store.state.cats_sub_菜单| | |[]））
因为在第一次呈现
store.state.cats\u sub\u菜单时，
是未定义的，不幸的是没有工作。我甚至在声明时传递了静态数据，但仍然得到了错误“blogCat是未定义的”啊，好吧，我明白了你的错，你应该在
v-for=“{blogCat，I}在blog\u sub菜单中用
替换
”
应该是
v-for=“（blogCat，i）在blog\u子菜单中”