"getWatchLength" is not defined on the instance but referenced during render. Make sure to-CodePudding

I've a vuex store which stores the state of the length of watched products, I get the length of product in my store but each time I try to {{getWatchlength}} in my code i get "getWatchlength" not defined

This the error I get in my console https://imageshack.com/i/pmlnoX9nj

This my vuex store https://imageshack.com/i/pmP87O5Ij I'm getting the length in my store

This my html code

<template>
  <div id="app">
    {{ getWatchLength }}
    <router-view></router-view>
  </div>
</template>

My script tag

<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
export default {
  name: "app",
  data() {
    return {
      categoryID: null,
      categories: [],
      products: [],
      show: null
    };
  },
  computed: {
    ...mapGetters( ["getWatchLength"], ["isLoggedIn"])
  }
};
</script>

Please, I don't know what I'm doing wrong

CodePudding user response：

Try like following:

import { mapGetters, mapActions } from 'vuex';

computed: {
  ...mapGetters(["getWatchLength", "isLoggedIn"])
}