1.输出从 state 里面获取到的对象

1.1 源代码

1.store （后台数据保存）：用 action ，mutations 保存到 info 里

2.在组件里用 computed 获取到刚保存的数据，以及输出

1.2 浏览器里输出的结果

1.3 我想要的效果

图片里面输出的都是一个一个对象，而我只想要在框框里输出对象的某一个属性的值。但是提醒说这个属性不存在

2.下方会给出所用到的部分代码

2.1 组件

<template> <div> <el-space wrap> <template v-for="item in articleContent" :key="item"> <el-card v-for="i in item" :key="i" class="box-card" style="width: 400px" > <template #header> <div class="card-header"> <el-button class="button" text>{{ i }}</el-button> <!--为什么会说 name 属性不存在呢？我已经在 article 模块里定义好接口了呀--> <el-button class="button" text>{{ i.content }}</el-button> </div> </template> </el-card> </template> </el-space> </div> </template> <script setup lang="ts"> import { onMounted, computed } from "vue"; import { useStore } from "@/store"; import { IArticleResponse } from "@/store/article/types"; //有网络请求：/article/list post 在 table 中显示全部文档，三列，默认是全部输出所有文档 onMounted(() => { store.dispatch("article/articleListAction", {}); }); const store = useStore(); console.log(store.state.article); const articleCOntent= computed(() => store.state.article); </script> <style scoped></style> 

2.2 store

import { Module } from "vuex"; import { listArticleRequest } from "@/service/article/article"; //import localCache from "@/utils/cache"; import { IState } from "../types"; import { IArticleResponse } from "./types"; import { IRootState } from "../types"; //缓存 import localCache from "@/utils/cache"; const articleModule: Module<IState<IArticleResponse>, IRootState> = { namespaced: true, state() { return { code: "", msg: "", token: "", info: { id: 0, user_id: 0, category1_id: 0, category2_id: 0, title: "", content: "", create_time: "", update_time: "", delete_status: "" } }; }, mutations: { // changeCode(state, code: string) { // state.code = code; // }, // changeMsg(state, msg: string) { // state.msg = msg; // }, // changeToken(state, token: string) { // state.token = token; // }, changeInfo(state, userInfo: any) { state.info = userInfo; } }, actions: { //前台首页获取分类 async articleListAction({ commit }, queryInfo: any) { // 1.向后端进行网络请求 const loginResult = await listArticleRequest(queryInfo); //2.保存返回体 commit("changeInfo", loginResult.data.info); } } }; export default articleModule; 

2.3 定义的接口

export interface IArticleResponse { id: number; user_id: number; category1_id: number; category2_id: number; title: string; content: string; create_time: string; update_time: string; delete_status: string; } export interface IState<T = any> { code: string; msg: string; token: string; info: T; }