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

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

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

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

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Q&A

解決済

1回答

2541閲覧

スプレッド演算子の導入

syoyu

総合スコア13

Vue.js

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

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

0グッド

0クリップ

投稿2018/01/30 07:42

編集2018/01/30 11:43

vue.jsで初めてアプリを開発しています。
コンポーネントで...mapStateというようにスプレッド演算子を用いようとしたところモジュールビルドエラーが出てしまいます。
何をnpmして.babelrcには何を記述すればよいのか教えていただけないでしょうか。

https://qiita.com/tanikawa/items/945e5247eb5afc520b93を参考に
現在のpackage.jsonは
"devDependencies": {
"babel-cli": "^6.0.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0"
}

.babelrcは
{
"plugins": ["transform-runtime", "transform-object-rest-spread"],
}

となっていますがModule build failed: ReferenceError: Unknown plugin "transform-runtime"とエラーが出ます。

↓コンポーネント

js

1export default{ 2 name: 'add', 3 4 computed:{ 5 ...mapState(['lists','newPlanCostomer','newPlanDate','newPlanStart','newPlanFinish']), 6 7 ...mapGetters(['getLists']), 8 }

listsという配列に変更を加え、変更後のlistsを表示するコンポーネントです。

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

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

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

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

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

maisumakun

2018/01/30 08:01

スプレッド演算子は配列に対するものでしょうか、それともオブジェクトに対するものでしょうか。
syoyu

2018/01/30 11:39

配列のstateに対してのmapStateと、stateをそのまま返すだけのgettersに対してのmapGettersをコンポーネントのcomputedに記入したいです。
syoyu

2018/01/30 11:40

配列のstateに対してのmapStateと、その配列のstateをそのまま返すだけのgettersに対してのmapGettersをコンポーネントのcomputedに記入したいです。
guest

回答1

0

ベストアンサー

VuexのmapState(オブジェクトが返ってきます)をスプレッド演算子で展開しようとしているようですが、
オブジェクトスプレッド演算子演算子に、"transform-runtime" プラグインは不要なので、削除すれば動くと思います。

投稿2018/01/30 08:11

syumai

総合スコア83

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

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

syoyu

2018/01/30 11:50

動きました!ご丁寧に教えていただきありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問