Vuex дает мне неопределенный, когда я пытаюсь получить доступ к объекту store.state из состояния

Question

я использую последние vue и vuex.

У меня есть компонент, который проходит через папки из API, а затем выводит их в шаблон маршрута. Папки выводятся в шаблон из геттера хранилища vuex, который я создал в файле /stor/index.js.

Ниже приведен компонент Папки:

<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 / index.js есть следующее:

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"
},

]
}

Теперь, когда я пытаюсь получить доступ к this.$store.state.folders.subFolders, я получаю неопределенное значение.

Интересно, что в шаблоне {{this.$store.state.folders.subFolders}} это возвращает то, что мне нужно. Вычисленное отображенное состояние работает.