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

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

ただいまの
回答率

88.92%

vuexのファイル間のやりとりがうまくいかない

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 183

amateur1

score 2

前提・実現したいこと

vue.js入門を使っています。

ここに質問の内容を詳しく書いてください。
vuexを用いて、アプリを作成しようとしたのですが、ファイル間のやりとりがうまくいっていないようで、エラーが出てしまいます。

■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

warn]: Error in render: "TypeError: Cannot read property 'state' of undefined"

found in

---> <App> at App.vue
       <Root>

該当のソースコード

App.vue

<template>
  <div>
    <h2>タスク一覧</h2>
    <ul>
      <li v-for="task in tasks" v-bind:key="task.id">
        <input type="checkbox" v-bind:checked="task.done">
        {{ task.name }}
      </li>
    </ul>

  </div>
</template>

<script>
  export default{
    name: 'App',
    computed: {
      tasks() {
        console.log(this.$store)
        return this.$store.state.tasks
      },
    },
}
</script>


main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})


store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
    tasks:[
      {
        id: 1,
        name: '牛乳を買う',
        labelIds: [1,2],
        done: false
      },
      {
        id: 2,
        name: 'Vue.jsの本を買う',
        labelIds: [1,3],
        done: true
      }
    ],
  },
})

export default store

試したこと

this.$storeがundefinedであることは確認しました。
ファイル同士のやり取りがうまくいっていないことが原因だと考えています。

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

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • rubytomato

    2020/07/21 19:16

    store.jsをindex.jsにリネームしたらどうなりますか?

    キャンセル

  • oec

    2020/09/10 03:03

    すみません、全部コピペして動かしてみたらエラー吐かずに動いてしまいました…

    store.jsはmain.jsと同じ階層でしたら、main.jsのインポート時にちゃんと指定すれば問題なく動きました
    ×import store from './store'
    〇import store from './store.js'

    キャンセル

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

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

  • ただいまの回答率 88.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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