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

前提・実現したいこと

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/ツールのバージョンなど）

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

rubytomato

2020/07/21 10:16

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

oec

2020/09/09 18:03

すみません、全部コピペして動かしてみたらエラー吐かずに動いてしまいました… store.jsはmain.jsと同じ階層でしたら、main.jsのインポート時にちゃんと指定すれば問題なく動きました ×import store from './store' 〇import store from './store.js'