Javascript 当我尝试从状态访问store.state对象时，Vuex给了我未定义的权限

我正在使用最新的vue和vuex

我有一个组件，它从api中遍历文件夹，然后将它们输出到路由模板中。文件夹从我在/stor/index.js文件上创建的vuex存储getter呈现到模板中

下面是文件夹组件：

<template lang="html">
  <div>
    <FolderActions/>
    <!-- Folders -->
    <div class="flex-none w-100 mv3 gray folders"><div class="ph4"><p>Folders({{ folders['subFolders'].length }})</p></div></div>
    <div class="flex flex-row flex-wrap justify-start items-start folders">
      <div v-for="folder in folders['subFolders']" class="w-third-ns w-100 pl4 pointer folder relative">
        <a :class="[{highlight:selectedFolders.includes(folder.uuid)}, 'absolute right-2 top-2 z-3 activeToggle']"></a>
        <router-link :to="`/folders/${folder.uuid}`">
          <div class="image-blocks flex flex-row flex-wrap br3 overflow-hidden relative">

              <div v-for="image in folder.topThreeThumbnails">
                <img :src=image>
              </div>

          </div>
        </router-link>
        <div class="content">
          <h3>{{folder.folderName}}</h3>
          <p>{{folder.subFolderCount}} subfolders, {{folder.totalElements}} elements</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import FolderActions from './FolderActions.vue'
import { mapState } from 'vuex'
export default {
  components: {
    FolderActions
  },
  name: 'folderList',
  computed: mapState([
    'folders',
    'selectedFolders'
  ]),
  methods: {
    pushFolders: function() {
      console.log(this.$store.state.folders.subFolders);
    },
    checkAll: function(){

      this.isSelectedAll = !this.isSelectedAll;
      this.selectedFolders = [];
      if(this.isSelectedAll){ // Check all
        // this.selectedFolders.push(this.selected[key]);
        this.$store.dispatch('SELECT_FOLDERS',this.selected)
      }
    }
  },
  created: function() {
    this.pushFolders();
  }
}

</script>

文件夹的端点输出以下数据结构：

现在，当我尝试访问

这个.store.state.folders.subFolders时，我没有定义

有趣的是，在模板
{{this.$store.state.folders.subFolders}}
中，这返回了我需要的内容。计算出的映射状态正在工作。
似乎
此.$store.state.folders
是一个数组，您对
此.$store.state.folders.subFolders的期望值是多少？
？文件夹：对象createdDate:“2018-04-13T15:22:59.763Z”文件夹名称：“我的文件夹”子文件夹：数组[3]0:对象标题：“15新建”createdDate:“2018-04-13T15:22:59.763Z”folderName:“Bookmarks”folderUri:“http://******/rest/user/folder/abcd-9bvjvkubj0746gybjbjb8”子文件夹计数：4个前三个缩略图：数组[3]总计元素：3 uuid:“abcd-9bvjvkubj0746gybjb8”1:Object 2:Object上面是vue调试器工具更改中状态对象中显示的内容
状态：{folders:[]，
到
状态：{folders:{subFolders:[]}，
，然后重试。但是如果您明白我的意思，我需要整个响应对象而不仅仅是子文件夹？
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

const store = new Vuex.Store({
  state: {
    folders: []
  },
  actions: {
    LOAD_FOLDERS_LIST: function ({ commit }) {
      axios.get('http://********/rest/user/folder/folders.json').then(response => {
        commit('SET_FOLDER_LIST', { list: response.data })
      }, (err) => {
        console.log(err)
      })
    },
  },
  mutations: {
    SET_FOLDER_LIST: (state, { list }) => {
      state.folders = list
    },
  },
  getters: {
    openFolders: state => {
      return state.folders
    },
  }
})
export default store

{
"folderName": "My Folders",
"createdDate": "2018-04-13T15:22:59.763Z",
"subFolders": [
{
"folderName": "Bookmarks",
"createdDate": "2018-04-13T15:22:59.763Z",
"folderUri": "http://******/rest/user/folder/abcd-9bvbjyvkubj0746gybjgyb8",
"caption": "15 new",
"subFolderCount": 4,
"totalElements": 3,
"topThreeThumbnails": [
"https://******/website/var/tmp/image-thumbnails/0/33284/thumb__220/2018/02/27/27-02-18-gen-y-main-street-title-st.jpg",
"https://******/website/var/tmp/image-thumbnails/0/33217/thumb__220/2018/02/26/26-02-18-circular-economy-title-st.jpg",
"https://******/website/var/tmp/image-thumbnails/0/33225/thumb__220/2018/02/26/26-02-18-little-gladiators-title-st.jpg"
],
"uuid": "abcd-9bvbjyvkubj0746gybjgyb8"
},

]
}