vue3+ts vuex存储问题

import { createStore } from "vuex"

import persistedstate from "vuex-persistedstate";
import  user from "./modules/user"

export default createStore({
    state: {
        num: 10,
        sum:10,
        str:"这是store数据"
    },
    getters: {
        total(state) {
            return  state.num+state.sum
        }
    },
    mutations: {
        changeNum(state,val) {
            state.num = val;
        }
    },
    actions: {
        changeBtn() {
            alert(1)
        }
    },
    modules: {
        user
    },
    // 持久化存储
    plugins: [persistedstate({
        key: "vuexStr",
        paths:['user']
    })]
})

./modules/user

export default {
    state: {
        userInfo: {
            name: '',
            age: '',
            sex:''
        }
    },
    mutations: {
        changeInfo(state:any) {
            state.userInfo = {
                name: '123',
                age: "12",
                sex:'男'
            }
        }
    }
}

页面使用：

<template>
  <p>num:{{ num }}</p>
  <p>total:{{ total }}</p>
  <button @click="btnCli">修改值</button>

  <p>---------------------</p>
  <p>---------------------</p>
  <p>---------------------</p>
  <p>用户名：{{ userInfo.name }}</p>
  <p>性别：{{ userInfo.sex }}</p>
  <p>年龄：{{ userInfo.age }}</p>
  <button @click="updateUser">修改用户信息</button>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useStore } from "vuex";
let store = useStore();
let num = computed(() => store.state.num);
let total = computed(() => store.getters.total);

// userinfo

let userInfo = computed(() => store.state.user.userInfo);
console.log(store);
const btnCli = () => {
  // store.commit("changeNum", 500);
  store.dispatch("changeBtn");
};

const updateUser = () => {
  store.commit("changeInfo");
};
</script>

<style></style>

效果图一：