Nuxt.jsでVuexのStateを参照できない

Question

前提・実現したいこと

Nuxt.js + Vuexを利用したWebページを作成しています。
ドロワーメニューの表示/非表示をVuexのStateで状態を管理したいです。
pages/index.vueでStateを参照しようとすると、定義されていないとエラーが出てしまいました。

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

Cannot read property 'state' of undefined

該当のソースコード

pages/index.vue

<template>
  <div class="page-container md-layout-column">
    <md-toolbar class="md-primary">
      <md-button class="md-icon-button" @click="toggleMenu">
        <md-icon>menu</md-icon>
      </md-button>
      <span class="md-title">Test</span>
    </md-toolbar>

    <md-drawer :md-active.sync="showNavigation">
      <md-toolbar class="md-transparent" md-elevation="0">
        Test
      </md-toolbar>

      <md-list>
        <md-list-item>
          <md-icon>info</md-icon>
          <span class="md-list-item-text">Info</span>
        </md-list-item>
      </md-list>
    </md-drawer>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

export default {
  methods: {
    ...mapMutations({
      toggleMenu: 'toggleMenu'
    })
  },
  computed: {
    ...mapState({
      showNavigation: 'showNavigation'
    })
  }
}
</script>

store/index.js

const store = () => new Vuex.Store({

  state: {
    showNavigation: false,
    loading: false
  },
  mutations: {
    toggleMenu (state) {
      state.showNavigation = !state.showNavigation
    }
  }

})

試したこと

Nuxt.jsのガイド「Vuex ストア」を確認し、<template>内でStateを参照するようにしましたが、状況は変わりませんでした。
https://ja.nuxtjs.org/guide/vuex-store/

<md-button class="md-icon-button" @click="$store.commit('toggleMenu')">

<md-drawer :md-active.sync="$store.state.showNavigation">

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

node: 8.9.1

package.json

  "dependencies": {
    "nuxt": "^1.0.0",
    "nuxt-vue-material": "^1.1.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0",
    "node-sass": "^4.9.2",
    "sass-loader": "^7.0.3"
  }

Answer 1

<md-drawer :md-active.sync="showNavigation">

この部分が不味いです。.sync 修飾子は v-model のようなもので、update メッセージが子コンポーネントから送られてくると、自動で親が該当プロパティの値を更新するというものです。

一方 showNavigation は computed なプロパティとして定義されてますので、直接値を入れることはできません。
なので、親側に data としてプロパティを持たせて、それを :md-active.sync に渡さなければなりません。Vuex との連携は、ウォッチャを上手く使いましょう。

Comments

[w2-yamaguchi]

回答ありがとうございます！

以下について、詳しく教えていただけないでしょうか。
> Vuex との連携は、ウォッチャを上手く使いましょう。

また、以下の通り実装してみると、想定通りの挙動をしました。
あまりよろしくない実装なのでしょうか？

```
methods: {
...mapMutations({
toggleMenu: 'toggleMenu'
})
},
computed: {
showNavigation: {
get () { return this.$store.state.showNavigation },
set () { this.toggleMenu() }
}
}
```

[yhg]

あ、その方法ならバッチリですね！ set/get あまり使わないので思いつきませんでした。

[w2-yamaguchi]

ありがとうございました！