ReferenceError: students is not definedを解決したい。

Question

前提・実現したいこと

nuxt.jsで生徒の管理アプリを作っています。

created: function() {
     this.$store.dispatch('add/init')
   },

上の部分のコメントを外すと
以下のエラーが出て解決できず困っています。

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

ReferenceError: students is not defined

該当のソースコード

add.vue

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col>
            <v-row justify="center">
              <v-icon class="ml-5">
                mdi-account
              </v-icon>
              <h1 class="ml-5">生徒管理</h1>
              <v-spacer></v-spacer>
            </v-row>
            <v-divider color="blue"/>
          </v-col>
        </v-row>
          <ValidationObserver ref="observer" v-slot="{ invalid }" immediate>
            <v-form  @submit.prevent="registration" v-model="valid">
              <Name />
              <Kana />
              <GenderLilationship />
              <BirthdayPhoneNumber />
              <Address />
              <v-spacer />
              <Building />
              <Remark />
                <v-row dense>
                  <v-col justify="center" align="center">
                    <v-btn type="submit" to="/" nuxt color="success" :disabled="invalid">送信</v-btn>
                  </v-col>
                </v-row>
            </v-form>
        </ValidationObserver>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
略
export default {
  components : {
    略
  },
  data() {
    return {
      valid: false,
      students: [],
    }
  },
  created: function() {
      this.$store.dispatch('add/init')
    },　//ここをコメントから外すとエラーが出ます。
  methods: {
    registration() {
        this.$store.dispatch('add/add', this.firstName)
        this.firstName = ''
      }　//ここも
  },
}
</script>

####add.js

import { firestoreAction } from 'vuexfire'
import firebase from '~/plugins/firebase'
import 'firebase/firestore'

const db = firebase.firestore()
const studentsRef = db.collection('students')

export const state = () => ({
  stutents: []
})

export const actions = {
  init: firestoreAction(({ bindFirestoreRef }) => {
    bindFirestoreRef('students', students)
  }),
  add: firestoreAction((context, firstName) => {
    if(firstName.trim()) {
      studentsRef.add({
        firstName: firstName,
      })
    }
  })
}

試したこと

定義されていないのであれば、dataにstudents[]を入れてみましたが、変わらず。他解決方法が浮かびません。

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

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

Answer 1

解決しました。上記コードをindex.vueに写し

import { db } from '~/plugins/firebase.js'

を追加し

created: function () {
    this.$store.dispatch('add/init', db.collection('students'))
  },

に変更することで解決しました。