pinia的使用

pinia的特点什么的就不特别描述了，官网描述的很细了，本篇文章就给大家一个copy基本步骤的地方，如果一点基础都没有建议先去官网了解一下

 1.下载

yarn add pinia
# 或者使用 npm
npm install pinia

2.创建一个单独的文件

• 建议可以分文件，如不同模块或者功能什么的，具体以你的习惯为准

import { createPinia, defineStore } from 'pinia';


// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const GlobalStore = defineStore({
	// id: 必须的，在所有 Store 中唯一
	id: 'GlobalState',
	state: () => {
		return {
			
		};
	},
	actions: {

	},
});

const pinia = createPinia();

export default pinia;

3.在main.js(ts)引入并注册

import { createApp } from 'vue';
import App from './App.vue';

import pinia from '@/stores/index';

const app = createApp(App);

app.use(pinia).mount('#app');

4.在需要的文件里面使用

<template>
    开始使用
</template>

<script  setup>
import { GlobalStore } from '@/stores/index';

let globalStore = GlobalStore();
// globalStore上面挂载了相关的数据及方法


</script>

上面基本上就是使用步骤了，下面的就个人遇到的一个问题，然后及解决办法

 问题：当有几个不同的数据管理文件时，如果a文件想使用b文件的数据及方法，开始是把调用b组件放在了actions，但是这样感觉不咋优雅，如果多个方法需要操作b组件的数据，就需要多次调用b组件的实例，后面想着放在了state上，这样就只需要实例化一次即可

1. a文件

   import { createPinia, defineStore } from 'pinia';
   import {B} from './modules/b'
   
   // const b = B() 这是错误的pinia还没注册的
   
   // defineStore 调用后返回一个函数，调用该函数获得 Store 实体
   export const GlobalStore = defineStore({
   	// id: 必须的，在所有 Store 中唯一
   	id: 'GlobalState',
   	state: (): GlobalState => {
   		return {
   			newTest: b(), // 可以在这里调用 B 文件，将其挂载到当前文件上，这样当前文件都能使用了
   		};
   	},
   	actions: {
   		setVal(val) {
   			this.newTest.setBdata(val)
   		},
   	},
   });
   
   const pinia = createPinia();
   
   export default pinia;

2. b文件

import { defineStore } from 'pinia';
export const B = defineStore({
	id: 'B',
	state: () => {
		return {
			data: '',
		};
	},
	actions: {
		steBdata(val) {
			this.data = val;
		},
	},
});

如果有什么不对的地方及好的建议欢迎指点