routerファイルからVuexのstoreにアクセスする方法

2021年6月10日Vue.js

routerファイルからVuexのstoreにアクセスする方法を紹介します。

routerファイルからVuexのstoreにアクセスする方法

src/router/index.jsという場所にrouterのファイルがあるとします。
そこから、src/store/index.jsという場所のstoreのファイルへアクセスして、this.$store.state.fooのように利用したいとします。
しかし、this.$store.state.fooというようにアクセスしようとすると、次のように怒られます。

TypeError: Cannot read property '$store' of undefined

そのため、その場合次のようにします。

storeのファイルをインポートする

import store from '@/store/index.js'

store/index.jsにアクセスしたい場合、そのままそのファイルをインポートします。

store.state.fooでアクセス

this.$store.state.fooではなく、store.state.fooでアクセスします。

import Vue from 'vue'
import VueRouter from 'vue-router'
// storeにアクセスするため
import store from '@/store/index.js'

// route guard
import { projectAuth } from '../firebase/config'
// import Firebase from '../firebase/config'

Vue.use(VueRouter)

const requireAuth = (to, from, next) => {
  let user = projectAuth.currentUser
  if (!user) {
    store.state.step = 1
    next({ name: 'Form' })
  } else {
    next()
  }
}