vue3 vuex中数据响应

在写一个后台管理系统的时候，应用到了vuex，但是遇到了一个问题，就是更改vuex中的数据问题的时候，标签里的属性isCollapse没有跟着发生变化。

<el-menu
    background-color="#001529"
    class="el-menu-vertical-demo"
    :default-active="currentroute"
    :unique-opened="true"
    :collapse="isCollapse"
    text-color="#858e8b"
    @open="handleOpen"
    @close="handleClose"
    router
  >

</el-menu>


<script lang="ts">
import { RouteRecordRaw, useRouter } from 'vue-router';
import { useStore } from 'vuex';

export default defineComponent({
  setup() {
    const store = useStore();
    const isCollapse = store.getters.pickcollapse;
    return {
      isCollapse,
    };
  },

});
</script>

正确写法：

<el-menu
    background-color="#001529"
    class="el-menu-vertical-demo"
    :default-active="currentroute"
    :unique-opened="true"
    :collapse="isCollapse"
    text-color="#858e8b"
    @open="handleOpen"
    @close="handleClose"
    router
  >

</el-menu>


<script lang="ts">
import { RouteRecordRaw, useRouter } from 'vue-router';
import { useStore } from 'vuex';

export default defineComponent({
  setup() {
    const store = useStore();
    const isCollapse = computed(() => store.getters.pickcollapse);
    //const appInfo = computed(() => useStore().state.appGlobal.appInfo)
    return {
      isCollapse,
    };
  },

});
</script>