1.安装npm install vuex@next --save 新建store--->index.ts

import { InjectionKey } from "vue";

/**
 * 引入InjectionKey 并将其传入usestore 
 * 
 */

import {useStore as baseUseStore,createStore,Store} from 'vuex'

//为store state声明类型
export interface State {
    username:string,
    count:number
}

//定义 injection key
export const key:InjectionKey<Store<State>>=Symbol()

//导出store模块
export const store=createStore<State>({
    state:{
        username:'测试',
        count:0
    },
    getters:{
        getName:state=>{
            return state.username
        }
    },
    mutations: {
        SET_NAME(state,params:string){
            state.username=params;
        }
    },
    actions:{}
})


export function useStore(){
    return baseUseStore(key)
}

2.main.ts引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import {store,key} from './store'
// createApp(App).mount('#app')

const app=createApp(App)
app.use(store,key)
app.mount('#app')

3.使用

<template>
<TsSample :msg="2332" @on-update="onUpdateFun"></TsSample>
</template>



<script setup lang="ts">
import {useStore} from './store'
import TsSample from './components/ts-sample/index.vue'
const onUpdateFun=((params:any)=>{
  console.log('获取子组件input',params);
})
const store=useStore();
store.commit('SET_NAME','李四')
console.log(store.getters.getName);



</script>
<style scoped>

</style>