Vue3 项目创建 与 vuex ts支持
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> = Symbol()
export const store = createStore({
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 使用示例
一个数字:{{ count }}动物信息名字:{{ animal.name }} 年龄:{{ animal.age }}