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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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アプリケーションを提供します。

受付中

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

Kumamo
Kumamo

総合スコア0

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評価

0クリップ

910閲覧

投稿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",

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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アプリケーションを提供します。