通过mock生成了floors的随机数据，想通过vuex将其遍历到页面上，但是state中没有出现floors属性

通过mock生成了floors的随机数据，想通过vuex将其遍历到页面上，但是state中没有出现floors属性
报错：

js:4605  [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'floors')"

found in

--->  at src/pages/Home/index.vue
        at src/App.vue

相关代码
1.src >store>modules>home.js

2.然后再Home/index.vue中分发

遍历

查看了vuex中state，一个属性也没有，想问问大家可能会是什么问题，提前感谢

我看你v-for 是floor 不是floors

不知道你这个问题是否已经解决, 如果还没有解决的话:

帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7781650

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

我在home.js文件中打印输出了一下没有结果出来，在Home>index.vue中打印输出

显示undefine

你这个 modules home模块引入到主模块了? 没看你这贴这块的代码

以下回答引用自chatGpt, 有用的话，请采纳哇！！！
问题：vue2中，使用mock生成floors的随机数据,vuex将其遍历到页面。该怎么实现
假设您已经安装了 vue 和 vuex 库，并且在项目中安装了 mockjs 库，那么您可以按照以下步骤来实现：

在 mock 文件夹下创建一个名为 floors.js 的文件，用于生成 floors 的随机数据。示例代码如下：

import Mock from 'mockjs'

const floors = []

for (let i = 1; i <= 5; i++) {
  const floor = Mock.mock({
    id: i,
    name: `Floor ${i}`,
    rooms: Mock.Random.integer(10, 20)
  })
  floors.push(floor)
}

export default floors

在这个示例代码中，我们使用 Mock 库来生成 5 层楼层数据，每层楼层数据包含 id、name 和 rooms 三个属性。其中，id 属性从 1 开始递增，name 属性为 Floor ${i} 的格式，rooms 属性为一个随机整数，表示该层楼的房间数目。

在 store 文件夹下创建一个名为 floors.js 的文件，用于存储 floors 的数据状态和操作方法。示例代码如下：

const state = {
  floors: []
}

const getters = {
  allFloors: state => state.floors
}

const mutations = {
  setFloors: (state, floors) => (state.floors = floors)
}

const actions = {
  fetchFloors: ({ commit }) => {
    // 在这里使用 mock 数据代替真实接口调用
    const floors = require('@/mock/floors').default
    commit('setFloors', floors)
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

在这个示例代码中，我们定义了一个名为 state 的对象，用于存储 floors 的数据状态；一个名为 getters 的对象，用于获取 floors 的数据状态；一个名为 mutations 的对象，用于修改 floors 的数据状态；一个名为 actions 的对象，用于操作 floors 的数据状态。其中，fetchFloors 方法使用 mock 数据代替真实接口调用，将生成的楼层数据存储到 floors 的数据状态中。

在 App.vue 文件中引入 floors 数据，将其遍历到页面上。示例代码如下：

<template>
  <div>
    <h1>Floors:</h1>
    <ul>
      <li v-for="floor in floors" :key="floor.id">
        {{ floor.name }} ({{ floor.rooms }} rooms)
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters(['allFloors'])
  },
  created() {
    this.fetchFloors()
  },
  methods: {
    ...mapActions(['fetchFloors'])
  }
}
</script>

在这个示例代码中，我们使用 `mapGetters