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

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

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

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

Vuex

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

解決済

Laravel8 Vue2 でVuexを使用するとexport 'inject' (imported as 'inject') was not foundエラー

mikeko0901
mikeko0901

総合スコア214

Vue.js

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

Vuex

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

1回答

0評価

0クリップ

170閲覧

投稿2022/08/01 06:26

Laravel8 Vue.jsのバージョンは2でvuexを使用したくサンプルコードを試していますが、
npm run watchで以下のエラーが出てしまいます。

WARNING in ./node_modules/vuex/dist/vuex.esm-bundler.js 14:9-15 export 'inject' (imported as 'inject') was not found in 'vue' (possible exports: default) WARNING in ./node_modules/vuex/dist/vuex.esm-bundler.js 140:17-25 export 'reactive' (imported as 'reactive') was not found in 'vue' (possible exports: default) WARNING in ./node_modules/vuex/dist/vuex.esm-bundler.js 345:2-7 export 'watch' (imported as 'watch') was not found in 'vue' (possible exports: default) WARNING in ./node_modules/vuex/dist/vuex.esm-bundler.js 1078:9-14 export 'watch' (imported as 'watch') was not found in 'vue' (possible exports: default)

resources>js>app.js は以下になりますが、★部分をコメントアウトするとこのwarnは出てこないので、このvuexがいけないのかなと思ってます。
■resources>js>app.js

import './bootstrap' import Vue from 'vue' //spaで追加 import router from './router' //vuexで追加 import store from './store.js' //★コメントアウトするとwarnは出ない //ページネーションで追加 testコメント import Paginate from 'vuejs-paginate' //モーダルで追加 import VModal from 'vue-js-modal'; Vue.use(VModal); window.Vue = require('vue'); Vue.component('ShopOrder', require('./component/user/ShopOrder.vue').default); Vue.component('ShopOrderCheck', require('./component/user/ShopOrderCheck.vue').default); Vue.component('StripeCard', require('./component/user/StripeCard.vue').default); Vue.component('StripeCard3', require('./component/user/StripeCard3.vue').default); Vue.component('ShopComplete', require('./component/user/ShopComplete.vue').default); //ページネーションで追加 Vue.component('paginate', Paginate); //Vue.component('AccountList', require('./component/admin/AccountList.vue').default); これだと表示されない const app = new Vue({ el: '#app', router, //spaで追加 store: store, // ストアを追加する★コメントアウトするとwarnは出ない }) //これ何だっけ… //require('alpinejs');

以下はpackage.jsonです。
■package.json

{ "private": true, "scripts": { "dev": "npm run development", "development": "mix", "watch": "mix watch", "watch-poll": "mix watch -- --watch-options-poll=1000", "hot": "mix watch --hot", "prod": "npm run production", "production": "mix --production" }, "devDependencies": { "@tailwindcss/forms": "^0.3.3", "@tailwindcss/typography": "^0.4.1", "alpinejs": "^3.2.4", "axios": "^0.21", "laravel-mix": "^6.0.6", "lodash": "^4.17.19", "postcss": "^8.1.14", "postcss-import": "^14.0.2", "tailwindcss": "^2.2.7", "vue-loader": "^15.9.8", "vue-template-compiler": "^2.6.14", "vuex": "^4.0.2" }, "dependencies": { "@stripe/stripe-js": "^1.13.2", "@vue-stripe/vue-stripe": "^4.2.5", "vue": "^2.6.12", "vue-js-modal": "^1.3.35", "vue-router": "^3.5.2", "vuejs-paginate": "^2.1.0" } }

vuexをインストールする際に無邪気に

$ npm install --save-dev vuex

をしてしまいましたが、使用しているのはvue2なのでバージョンの関係でこのようなエラーが出てしまっているのかな…と思っているのですが…
どのようにすればよいか、アドバイスいただけますと幸いです。

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

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

Vuex

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

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。