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();
	....
}