Vue3 项目创建 与 vuex ts支持

本文主要是介绍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<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>

这篇关于Vue3 项目创建 与 vuex ts支持的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！