vue3 ts 使用 pinia

1. 安装 pinia， `npm i pinia`

2. 在 `main.ts` 文件中引入 `pinia`

import { createApp, App } from 'vue'
import { createPinia, Pinia } from 'pinia'
import AppComponent from './App.vue'const app: App = createApp(AppComponent)
const pinia: Pinia = createPinia()
app.use(pinia)
app.mount('#app')

3. 新建 `/src/store` 目录存放公共状态文件，例如

3.1 新建 `test.type.ts` 定义类型

type TestState = {count: numberuser: {age: numbername: string}
}
type TestGetters = {doubleCount: (state: TestState) => numberusername: (state: TestState) => string
}
type TestActions = {setCount: (count: number) => void
}
// 注意：如有导入导出的依赖数据或类型，自定义test类型需要使用export导出；否则可视为全局类型即可直接使用

3.2 新建 `test.ts` 创建test模块公共状态

import { defineStore } from 'pinia'// 在此约束类型不管编写或使用都可有较好的提示
export const useTestStore = defineStore<string, TestState, TestGetters, TestActions>('TestId', {state: () => ({count: 10,user: {age: 18,name: '小明'}}),getters: {doubleCount: (state) => state.count * 2,username: (state) => state.user.name},actions: {setCount(count: number) {this.count = count}}
})

4. 最后在任意页面使用即可

<script setup lang="ts">
import { useTestStore } from '@/store/test' const testStore = useTestStore()
console.log(testStore.count)
console.log(testStore.user.name)
console.log(testStore.doubleCount)
console.log(testStore.username)// 修改state数据方式1
testStore.count = 11
testStore.$state.count = 11// 修改state数据方式2
testStore.$patch({count: 11
})
testStore.$patch(state => {state.count = 11
})// 修改state数据方式3（不建议）
testStore.$state = {count: 11
}// 修改state数据方式4（建议）
testStore.setCount(11)</script>

vue3 ts 使用 pinia相关推荐

vue3+Ts使用pinia（vue-lic搭建项目）
1.安装 npm install pinia -S 2.pinia初始化 //在store目录下新建多个.ts文件(为了便于模块化和更好维护) //index.ts import { manage } ...
一步刷出个后台。Vue3+Ts+element-admin-Vite+Pinia
首先下载我这个资源.没有分的留邮箱免费发. vite-vue-ts精简模版集成pinia+svg+router+@src-Typescript文档类资源-CSDN下载本源码已经调试通过集成Vite-v ...
vue3+ts+pinia智慧党建模板
这里写自定义目录标题 vue3+ts+pinia 智慧门户模板 vue3+ts+pinia 智慧门户模板智慧党建模板,组织工作, "党员教育", "思想理论&q ...
VUE3中使用pinia
Vue3中使用pinia 安装依赖 yarn add pinia //下面这个取决你需不需要数据持久化安装 yarn add pinia-plugin-persist 挂载 import {creat ...
使用Vite创建Vue3+TS项目并整合Element Plus框架等一条龙服务
记录一下使用Vite创建Vue3+TS项目以及整合Element Plus框架,还有Less.Pinia.Vue-router.monaco-editor等插件或组件. 一.使用Vite创建Vue3+ ...
vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
前言以下操作,是续接之前第四步 --即:vite+vue3+ts+pinia+element-plus项目已完成搭建好,可以直接业务开发了主应用技术栈:vue2+webpack+js 集成qia ...
Vue3+TS+Vite+Element Plus搭建后台管理系统
Vue3+TS+Vite+Element Plus搭建后台管理系统 1.简介 2.效果图 3.技术栈 4.项目目录 5.setting.js(全局配置文件) 6.路由router 7.状态管理stor ...
vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（2）
回顾上篇文章地址:vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用(1)_konsei的博客-CSDN博客上篇文章搭建了vue3项目,引入了ant ...
vite+vue3+ts项目插件使用（提高开发效率vite+vue3插件使用）新增在线预览地址
在线预览 Link:https://wocwin.github.io/wocwin-admin/ 一.@vitejs/plugin-vue-jsx vite+vue3项目全面支持jsx语法 npm i ...

vue3 ts 使用 pinia

1. 安装 pinia， `npm i pinia`

2. 在 `main.ts` 文件中引入 `pinia`

3. 新建 `/src/store` 目录存放公共状态文件，例如

3.1 新建 `test.type.ts` 定义类型

3.2 新建 `test.ts` 创建test模块公共状态

4. 最后在任意页面使用即可

vue3 ts 使用 pinia相关推荐

最新文章

热门文章

vue3 ts 使用 pinia

1. 安装 pinia， npm i pinia

2. 在 main.ts 文件中引入 pinia

3. 新建 /src/store 目录存放公共状态文件，例如

3.1 新建 test.type.ts 定义类型

3.2 新建 test.ts 创建test模块公共状态

4. 最后在任意页面使用即可

vue3 ts 使用 pinia相关推荐

最新文章

热门文章

1. 安装 pinia， `npm i pinia`

2. 在 `main.ts` 文件中引入 `pinia`

3. 新建 `/src/store` 目录存放公共状态文件，例如

3.1 新建 `test.type.ts` 定义类型

3.2 新建 `test.ts` 创建test模块公共状态