vue nuxt vuex メモ

今後同じところで引っかからないように自分用のメモ
ドキュメントに全部しっかり載っていると思われます。

絶対関数にするのを忘れない、returnで返す！

振り返ってみるとなんでこんなんミスるんって感じ

index.vue

<template>
  <div>
    <h1>counter</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>

export default {
//ここから下の部分
  data(){
    return {
      message: 'カウントできます'
    }
  }
}
</script>

vuex モジュールモードでstate.js,getters.js,actions.js,mutattions.jsに分けて書いた時の謎のミス

※nuxtjsの時です、storeフォルダの中にあると思ってください
クラシックモードならこれでいいんですけどね、、、
意外にも全然気付きませんでした、ちなみに四つ全部エラー出ます。
ミスっている方
エラーコード　[vuex] getters should be function but "getters.getters" is {}.

getters.js

export const getters = {
  counter(state){
    return state.counter
}

正しい方

getters.js

export default {
  couter(state){
    return state.counter
  }
}

なんかgetters二回呼んでね？ってなってよくみたらおかしかったです。
クラシックモードからモジュールモードに書き換える時にやりそう。

ちなみにstateだけ書き方違うので注意

state.js

export default () => ({
  counter: 0
})

まだまだたくさん理解しなかんところたくさんあるので頑張っていきましょう