首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3+Ts使用pinia方式

vue3+Ts使用pinia方式(vue-lic搭建项目)

2025-01-24 09:31:05 作者：益达木咸醇

文章介绍了如何在Vue 3项目中使用Pinia进行状态管理,主要内容包括安装Pinia、初始化、在main.ts中注册和使用,以及在.vue的setup中使用state,文章还提到getters和actions的使用可以参考官方文档,总结部分表达了作者希望得到大家支持的意愿

vue3+Ts使用pinia(vue-lic搭建项目)

1、安装

npm install pinia -S

2、pinia初始化

//在store目录下新建多个.ts文件（为了便于模块化和更好维护）
//index.ts
import { manage } from './backstageMange';
export { manage };
//manage.ts
import { defineStore } from 'pinia';
export const manage = defineStore('manageStore',{
	state: () => {
	//状态
		return {
			person: {
				name: 'pinia',
				age: 0,
				say: 'woc'
			},
			reason: '我爱前端',
		}
	},
	getters: {
	//计算属性
	},
	actions: {
	//异步操作
	},
});

3、在main.ts中注册使用

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

4、在.vue的setup中使用

这里我只展示state的使用，getters和actions的使用请转弯到官方网址查阅。

<script lang="ts">
import { defineComponent } from 'vue';
import { manage } from '@/store';
export default defineComponent({
	setup() {
		const store = manage();
		...
		//store.person就可以拿到person这个对象
		//也可以直接把store直接return出去在template中使用
		
		//更改store状态
		//第一种方式，更灵活可以做一些其他的逻辑
		store.$patch((state: any) => {
			...
			state.person['name'] = '益达';
		});
		//第二种方式,只能直接更改某个状态
		store.$patch({
			  reason: '我更爱前端了！', //这里也可以写一个表达式，比如前面有一个变量赋值给reason，hobby ? hobby : '我更爱前端了！'
		})
	}
})
</script>

5、在ts文件中使用状态

import { manage } from '../store';
export function updateAside() {
	const store = manage();
	....
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。