Nuxt.jsでstateがうまく使えない

Question

前提

Nuxt.jsでstoreやstateを利用しようとしているのですが、うまく呼び出すことができません。
storeフォルダにindex.jsファイルを作成し、下記のように記述しています。

/store/index.js

import Vuex from 'vuex'

export const state = () => ({
  loading:false
})

export const mutations = {
  loading (state, flag) {
    state.loading = flag
  }
}

/pages/index.vueは下記のように記述しています。

/pages/index.vue

<template>
  <p>{{this.$store.state.loading}}</p>
</template>

エラー内容

Cannot read property 'state' of undefined と表示され、stateからデータを取得することが出来ない状況です。
呼び出し方を変えてもエラーから変化なしです。
動作的には、そもそもstoreを使える状況にないような気がしているのですが、
解決法についてご教授いただけないでしょうか。

よろしくお願いいたします。

Answer 1

storeの書き方は問題なく、tell_kさんの通りthis不要ですね。
loadingの表示等でstateの値を変更を検知して反映する場合、computedを使うとstateを変更した時点でレンダリングしてくれます。(ただ参照しているだけだとwatchされないようです)

<template>
  <p>{{loading}}</p>
</template>

<script>
export default {
  computed: {
    loading: function(){
      return this.$store.state.loading
    }
  }
}
</script>

Answer 2

template内で使うときは this が不要です。

<p>{{ $store.state.loading }}</p>

参考:
https://ja.nuxtjs.org/guide/vuex-store/