Use vuex, to update the state, in stores. Why is it not updated in the view?

vue a rookie to solve, the code is
component .vue

<template>
  <div class="top-ad-section" v-bind:class="{ show: isShowAdStatus }"></div>
</template>

<script>
export default {
  mounted() {
    setTimeout(() => {
      console.log(this.$store.getters.getTopAdStatus, "before lllll");
      this.$store.dispatch("toggleTopAd");
      console.log(this.$store.getters.getTopAdStatus, "after");
    }, 200);
  },
  computed: {
    isShowAdStatus() {
      return this.$store.getters.getTopAdStatus;
    }
  }
};
</script>

what this code wants to achieve is:
change the value of state in store after the component loads 200ms, and use this.$store.dispatch ("toggleTopAd") to change this value. This value can be obtained by this.$store.getters.getTopAdStatus. At this time, the printed value is the value in the correct state, but it is not reflected in the view. I don"t know where it is written.

A rookie, ask the great god for advice.
in the past, when I wrote react, I mainly used mobx for state management, so I feel that the state management of vuex is at least more similar to that of redux.

Feb.27,2021

because my vue is introduced with script tag, and then I introduce it again in store.js with import , and then delete the sentence import Vue from 'vue'; in store.js .

Menu