vue3使用pinia

vue3使用pinia

pinia类似于vuex, 但相对于vuex少了mutations和modules。
vuex: 集中式管理状态容器, 可以实现任意组件之间通信; 核心概念: state\mutations\actions\getter\modules。
pinia: 集中式管理状态容器, 可以实现任意组件之间通信 核心概念: state\actions\getters。

• 安装使用

npm i pinia --save

• 在src目录内创建 ’store‘ 文件夹并且在文件夹内创建index.ts和modules文件夹
• 1、store/index.ts内容

// 引入pinia
import {createPinia} from 'pinia'
// 使用createPinia创建大容器
let piniaStore = createPinia();
// 导出
export default piniaStore;

• 2、store/modules/info.ts

// 定义info小仓库
import {defineStore} from 'pinia';
// 第一个参数: 小仓库名称 第二个参数: 小仓库配置对象
// defineStore方法执行会返回一个函数, 函数作用就是让组件可以获取到仓库数据
let useInfoStore = defineStore('info',{
	// 存储数据
	state: ()=>{
		return {
			count: 99
		}
	},
	actions: {
		// 更新count数据方法
		updateCount(){
			this.count++;
		}
	},
	getter: {}
})

export default useInfoStore;

• 3、在main.ts里引入

// 引入pinia仓库
import piniaStore from './store/index.ts'

app.use(piniaStore)

• 4、在需要使用的vue文件里引入

<template>
	<div>
		{{ infoStore.count }}
	</div>
</templage>

<script setup lang='ts'>
	import useInfoStore from '../../store/modules/info.ts';
	let infoStore = useInfoStore();
	// 打印count
	console.log(infoStore.count);
	// 使用仓库里的方法
	const updateSotreCount = () =>{
		infoStore.updateCount();
	}
</script>