基本的なご質問になるかもしれませんが、試行錯誤しても解決できないため、皆様のお力をお貸ししていただけないでしょうか。
やりたいこと
stateの各値を合計するgettersを用意し、それをcomponents中のcomputedで呼び出して表示する。
できていること
・componentsの他のタグ要素は取り込んだpagesでもちゃんと表示される。
・stateの値自体はちゃんと{{}}の中にちゃんと表示される。
・エラー文、警告文は出ていない。
困りきっていること
gettersを返すcomputedの値だけが全く表示されない。
store.jsの中身です。
js
1export const state = () => ({ 2 cate_list:{ 3 dog:{count:0}, 4 cat:{count:1}, 5 bird:{count:1}, 6 lion:{count:0}, 7 rabbit:{count:1}, 8 human:{count:0} 9 }, 10}) 11export const getters = () => ({ 12 totalCategory : state =>{ 13 return state.cate_list.reduce((x,y) => x + y.count); 14 } 15})
そして、componentsのコードです。
vue
1<template> 2 <div> 3...... 4 <nuxt-link to="/" class="total"> 5 累計記事<span class="count"> ( {{total}} ) </span> 6 </nuxt-link> 7 </div> 8</template> 9<script> 10export default { 11 computed:{ 12 total(){ 13 return this.$store.getters.totalArticle; 14 } 15 } 16} 17</script>
文法的な間違いなのでしょうか。
初心者であるため、調べながらやっております。
そのため、「合っているはずなのに、」という偏見が脳内を埋め尽くして、間違いを見つけることができません。
お時間とらせて申し訳ないのですが、ご存知の方がいたら、ぜひ教えていただけないでしょうか。
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/25 20:11 編集
2020/05/09 21:19