Vue3 项目创建 与 vuex ts支持

目录

• 1、环境要求
•  2、项目创建
  • 2.1 项目创建命令
  • 2.2 配置选择 根据个人爱好
• 3. vuex TypeScript Support 
  • 3.1 示例代码
  • 3.2 使用示例

 

---

回到顶部

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>