Question

我正在使用最新的vue和vuex。

我有一个组件从api运行文件夹，然后将它们输出到路由模板中。这些文件夹从我在/stor/index.js文件中创建的vuex store 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 / 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}}中这会返回我需要的东西。计算出的映射状态正在起作用。

当我尝试从状态访问store.state对象时，Vuex给了我undefined

0 个答案: