Question

我是VueJS的新手，正在尝试构建一个使用VueJS，Nuxt和Vuex以及WordPress REST API从WordPress实例提取内容的应用程序。我能够连接到API，并且通过状态将内容拉入，但是我无法弄清楚如何从状态和模板中获取数据。我尝试的所有操作都会导致“ x不是函数”或“ x未定义”错误。

我在线上浏览了各种博客文章，但是找不到有效的解决方案。我要去哪里错了？

store / index.js

dups

页面/浏览/_slug/index.vue（父组件）

import Vuex from "vuex";
import axios from "axios";

const createStore = () => {
    return new Vuex.Store({
        state: {
            explore: null,
            pages: null
        },
        actions: {
            getExplore: function(context) {
                return new Promise((resolve, reject) => {
                    if (context.state.explore) {
                        resolve()
                    }
                    else {
                        axios.get(path_to_api_endpoint)
                        .then((response) => {
                            context.commit('storeExplore', response.data)
                            resolve()
                        }).catch((error) => {
                            reject(error);
                        });
                    }
                })
            },
            getSinglePage: function() {
                return new Promise((resolve, reject) => {
                    this.$store.dispatch('getExplore')
                    .then(() => {
                        var foundPage = false;
                        this.$store.state.pages
                        .filter((page) => {
                            if(pageName === this.$route.params.slug) {
                                this.singlePage = page;
                                foundPage = true;
                            }
                        });
                        foundPage ? resolve() : reject();
                    })
                })
            }
        },
        mutations: {
            storeExplore(state, response) {
                state.explore = response
            },
            storePages(state, response) {
                state.pages = response }
            }
    })
}

export default createStore

pages / detail.vue（“页面详细信息”组件-单页）

<template>
    <div>
        <layout-browserupgrade></layout-browserupgrade>
        <div class="wrapper" :toggle-nav="showHideNav" :class="navState">
            <layout-toolbar @showHideNav="showHideNav"></layout-toolbar>
            <layout-hero :pageRef="pageId"></layout-hero>
            <explore-detail></explore-detail>
            <layout-footer></layout-footer>
        </div>
        <layout-nav></layout-nav>
    </div>
</template>
<script>
    import layoutBrowserupgrade from '~/components/layout/browserupgrade.vue'
    import layoutToolbar from '~/components/layout/toolbar.vue'
    import layoutHero from '~/components/layout/heroStatic.vue'
    import layoutFooter from '~/components/layout/footer.vue'
    import layoutNav from '~/components/layout/nav.vue'
    import exploreDetail from '~/components/pages/detail.vue'

    const axios = require('axios');

    export default {
        components: {
            layoutBrowserupgrade,
            layoutToolbar,
            layoutHero,
            layoutFooter,
            layoutNav,
            exploreDetail
        },
        created: function() {
            this.$store.dispatch('getExplore')
        },
        data: function() {
            return {
                navState: 'menu-closed',
                feedLoaded: false,
                pageDetails: [],
                pageId: null,
                pageType: 'single',
                pageName: this.$nuxt.$route.params.slug
            }
        },
        mounted: function() {
            this.pageId = this.$nuxt.$route.params.pageId;
        },
        watch: {
            feedLoaded: function() {

                if (this.feedLoaded == true) {
                    this.pageId = this.pageDetails.id;
                } else {
                    console.log('Feed did not load')
                }

            }
        },
        methods: {
            showHideNav: function(event) {
                if (this.navState == 'menu-closed') {
                    this.navState = 'menu-open'
                } else {
                    this.navState = 'menu-closed'
                }
            }
        }
    }
</script>

我删除了所有数据插值以进行测试，只是为了看看我是否可以工作。

任何人都可以指向一些可以帮助我的文档，或者告诉我我出了什么问题吗？我想我的商店部分正确了，剩下的让我失望了。

感谢我在没有时间解决问题时可以提供的任何帮助。

谢谢！

亚历克斯

Answer 1

在您的页面中使用asyncData，这是仅在页面中使用的方法，每次加载页面组件之前都会调用该方法。

安装axios npm i axios。一个基于promise处理ajax请求的库。

和在pages / detail.vue中

<script>
  import axios from 'axios'
  ...

  asyncData({ params }) {
    return axios
      .get(
        APIENDPOINT
      )
      .then(data => {
        return {
          data
        };
      })
      .catch(e => context.error());
  },

  ...
</script>

要深入了解，请查看文档 https://nuxtjs.org/guide/async-data

VueJS / Nuxt / Vuex：如何从状态将内容插入模板

1 个答案: