gettersをcomputedに渡すが、表示されません。

Question

基本的なご質問になるかもしれませんが、試行錯誤しても解決できないため、皆様のお力をお貸ししていただけないでしょうか。

やりたいこと

stateの各値を合計するgettersを用意し、それをcomponents中のcomputedで呼び出して表示する。

できていること

・componentsの他のタグ要素は取り込んだpagesでもちゃんと表示される。
・stateの値自体はちゃんと{{}}の中にちゃんと表示される。
・エラー文、警告文は出ていない。

困りきっていること

gettersを返すcomputedの値だけが全く表示されない。

store.jsの中身です。

export const state = () => ({
    cate_list:{
        dog:{count:0},
        cat:{count:1},
        bird:{count:1},
        lion:{count:0},
        rabbit:{count:1},
        human:{count:0}
    },
})
export const getters = () => ({
    totalCategory : state =>{
        return state.cate_list.reduce((x,y) => x + y.count);
    }
})

そして、componentsのコードです。

<template>
  <div>
......
     <nuxt-link to="/" class="total">
          累計記事<span class="count"> ( {{total}} ) </span>
     </nuxt-link>
  </div>
</template>
<script>
export default {
  computed:{
    total(){
      return this.$store.getters.totalArticle;
    }
  }
}
</script>

文法的な間違いなのでしょうか。
初心者であるため、調べながらやっております。
そのため、「合っているはずなのに、」という偏見が脳内を埋め尽くして、間違いを見つけることができません。
お時間とらせて申し訳ないのですが、ご存知の方がいたら、ぜひ教えていただけないでしょうか。
よろしくお願いいたします。

Answer 1

export const getters = () => ({
  totalCategory : () => { // state を引数には不要？ 
    return state.cate_list.reduce((x,y) => x + y.count);
  }
})

total() {
  return this.$store.getters.totalCategory(); // totalArticleではない？ ()がないので関数呼び出しできていない？
}

ではないでしょうか？

Comments

[ff7575]

ご回答本当にありがとうございます。
ご指摘のあった箇所を全て修正させていただきましたが、
どうしてもthis.$store.getters.totalCategory is not a functionと出てしまいます。
どうやら、カッコを付け足すと、この警告がでるようでして、
逆にカッコをつけないと警告は出ないのですが、値が表示されません。
重ね重ね申し訳ありません。自分でもさらに探してみますので、他に何かお分かりになることがありましたら、
またご指摘いただけないでしょうか。

ご回答大変ありがとうございました。

[ff7575]

回答ありがとうございました。

自己解決いたしました。