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;
}