1、环境要求

 

 2、项目创建

2.1 项目创建命令

vue create vue3

2.2 配置选择 根据个人爱好

选第三项 自己配置

 

 配置如下 （上下切换选项 空格选中和取消） 

 

 回车下一步 具体设置如下图 根据个人需求选择 没有对于错 不要纠结

 

 回车下一步 项目生成

 

 

3. vuex TypeScript Support 

官网地址

3.1 示例代码

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

export interface Conut {
  count: number
}
export interface Animal {
  name: string, //
  age: number
}

export interface GlobalData {
  animal: Animal,
  conut: number
}

export const key: InjectionKey<Store<GlobalData>> = Symbol()

export const store = createStore<GlobalData>({
  state: {
    conut: 0,
    animal: {
      name: 'dog',
      age: 123
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

// define your own `useStore` composition function
export function useStore() {
  return baseUseStore(key)
}

3.2 使用示例

<template>
  <div class="row">
    <div>一个数字:</div>
    <div>{{ count }}</div>
  </div>
  <div class="row">
    <div>动物信息</div>
    <div>名字：{{ animal.name }} 年龄：{{ animal.age }}</div>
  </div>
</template>


<script lang="ts">
import { defineComponent } from "vue";
import { useStore } from "../store/index";
export default defineComponent({
  setup() {
    const store = useStore();
    const count = store.state.conut;
    const animal = store.state.animal;
    return {
      count,
      animal,
    };
  },
});
</script>
<style scoped>
.row {
  display: flex;
}
</style>