質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

0回答

1938閲覧

Nuxt.js(Vuex)にてurlを動的に取得してapiにアクセスしたい

Kumamo

総合スコア4

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

0クリップ

投稿2020/06/11 05:53

Nuxt.js(Vuex)にてurlを動的に取得してapiにアクセスしたい

記事・投稿一覧からVuexにてURLをもとにして動的にデータを取得して
表示したいと考えております。

そこで、APIへのアクセス→表示はうまくいったのですが、
動的なルーティングを実装する際に手詰まってしまい、質問させていただく次第です。
どうぞよろしくお願いします。

[ API express ] const { CONNECTION_URL, OPTIONS, DATABASE, } = require("../../config/mongodb.config.js"); const MongoClient = require("mongodb").MongoClient; const router = require("express").Router(); router.get("/*", (req, res) => { MongoClient.connect(CONNECTION_URL, OPTIONS, (error, client) => { const db = client.db(DATABASE); db.collection("posts") .findOne({ url: req.url, }) .then((doc) => { res.json(doc); }) .catch((error) => { throw error; }) .then(() => { client.close(); }); }); }); module.exports = router;
[ vuexの実装 ] export const state = () => ({ posts: [], }); export const getters = { posts: (state) => state.posts, }; ========================エラーが出力されてしまいます。 export const actions = { async getPost({ commit }) { const res = await this.$axios.$get(`/api/v1/posts/${this.$route}`); →取得できない const res = await this.$axios.$get(`/api/v1/${this.$route.params.id}`); →Cannot read property 'params' of undefined const res = await this.$axios.$get( `/api/v1/posts/2017/07/advanced-nodejs.html` ); →表示・取得できる commit("setPost", res); }, }; ======================== export const mutations = { setPost(state, data) { state.posts = data; }, };

VuexにてAxiosを使用した際に
アクセスしたurlを動的に取得できる方法を知りたいと思っております。
ご回答をお待ちしておりますので、どうぞよろしくお願いいたします。

試したこと

export const actions = { async getPost({ commit }) { const res = await this.$axios.$get(`/api/v1/posts/${this.$route}`); →取得できない const res = await this.$axios.$get(`/api/v1/${this.$route.params.id}`); →Cannot read property 'params' of undefined const res = await this.$axios.$get( `/api/v1/posts/2017/07/advanced-nodejs.html` ); →表示・取得できる commit("setPost", res); }, };

補足情報(FW/ツールのバージョンなど)

・nuxt: 2.0.0,
・express: 4.16.4,
・@nuxtjs/axios: 5.3.6,
・mongodb: 3.5.8",

回答にあたって必要な情報がございましたら、ご連絡をいただけたら幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問