Vue3+Ts+Vite2+Pinia 搭建开发框架

1. 在App.vue中设置路由展现出口

三、状态管理（Pinia配置）

Pinia 是 Vue.js 的轻量级状态管理库,也是Vue核心团队推荐的状态管理库，由于Pinia也是Vuex研发团队的产品，以及尤雨溪的加持，极大可能会替代Vuex，即使pinia的推广不太顺利也并不用过多担心，其许多使用方式很有可能会移植到Vuex5中。
相较于Vuex,Pinia上手更简单，mutations，并且actions支持同步或异步。

1. 使用yarn安装 pinia@next：yarn add pinia@next

2. src文件夹下新建store文件夹,store文件夹下新建main.ts

import { defineStore } from 'pinia' export const useUserStore = defineStore({ id: 'user', state: () => ({ name: '用户名' }), getters: { nameLength: (state) => state.name.length, }, actions: { updataUser(data: any) { console.log(data) } } })

1. 在main.ts中，引入createPinia

import { createApp } from 'vue' import App from './App.vue' import router from './router/index' import { createPinia } from 'pinia' const app = createApp(App) app.use(createPinia()) app.use(router) app.mount('#app')

四、基本使用

1. 获取state
   直接获取
   
   
   { {userStore.name}}
   
   
   

   computed获取

   
   

   { {name}}
   
   

   结构获取，但会失去响应式，需要使用storeToRefs

   
   

   { {name}}