vue3中状态管理 pinia的基本使用

vue3中的pinia就相当于vue2中的vuex,讲pinia之前，先回顾一下它们的区别！

vuex：集中式状态管理容器，可以实现任意组件之间通信！
核心概念： state、mutations、actions、getters、modules
pinia：集中式状态管理容器，可以实现任意组件之间通信！
核心概念： state、actions、getters
如何使用pinia：

1. 安装pinia

npm i pinia

2. src 目录下新建store/index.ts文件，引入pinia

//创建大仓库
import { createPinia } from 'pinia';
const store = createPinia();
export default store;

3. 在入口文件main.ts中引入仓库

import { createApp } form 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import App from './App.vue';
import store from './store';
import router from './router';
const app = createApp(App)
app.use(store);// 注册仓库
app.use(router);// 注册路由器
app.use(ElementPlus);
app.mount('#app')

4. 创建小仓库:src/store目录下新建/modules/info.ts

// 定义info小仓库
import { defineStore } from 'pinia';
// 参数一：小仓库名  参数二：小仓库配置对象
// defineStore方法执行会返回一个函数，让组件可以获取到仓库数据
const useInfoStore = defineStore("info",{
	// 存储数据
	state:()=>{
		return {
			count:99
		}
	},
	actions:{},
	getters:{}
})
export default useInfoStore;

5. 获取并使用store数据：
   组件infoCom.vue

<template>
	<div class="info">
		<h1>{{infoStore.count}}</h1>
	</div>
</template>

<script steup lang="ts">
import useInfoStore from '../../store/modules/info';
// 获取小仓库对象
let infoStore =useInfoStore()
</script>

6. 修改store数据：

   1. 组件中直接修改（不推荐，可读性和可维护性差）
      组件infoCom.vue
      infoStore.count++ 或者 infoStore.$patch({ count:111 })

      <template>
      	<div class="info">
      		<h1>{{infoStore.count}}</h1>
      	</div>
      </template>
      
      <script steup lang="ts">
      	import useInfoStore from '../../store/modules/info';
      	// 获取小仓库对象
      	let infoStore =useInfoStore();
      	const updateCount = () => {
      		infoStore.count++/**或者*/ infoStore.$patch({ count:111 })
      	}
      </script>
      
      

   2. store中修改（推荐）

      <template>
      	<div class="info">
      		<h1>{{infoStore.count}}</h1>
      		<button @click="updateCount">修改仓库数据</button>
      	</div>
      </template>
      
      <script steup lang="ts">
      	import useInfoStore from '../../store/modules/info';
      	// 获取小仓库对象
      	let infoStore =useInfoStore();
      	const updateCount = () => {
      		// 调用仓库自身方法，修改仓库数据
      		infoStore.updateNum(66,77);//传参
      	}
      </script>
      
      

      src/store/modules/info.ts

      <script steup lang="ts">
      	const useInfoStore = defineStore("info",{
      		state:()=>{
      			return:{
      				count:99
      			},
      			actions:{
      				updateNum(a:number,b:number){
      					this.count+=a
      				}
      			}
      		}
      </script>
      
      

7. 计算属性getters：

// 定义info小仓库
import { defineStore } from 'pinia';
// 参数一：小仓库名  参数二：小仓库配置对象
// defineStore方法执行会返回一个函数，让组件可以获取到仓库数据
const useInfoStore = defineStore("info",{
	// 存储数据
	state:()=>{
		return {
			arr:[1,2,3,4,5,6,7]
		}
	},
	actions:{},
	getters:{
		total(){
			const result:any = this.arr.reduce((prev:number,next:number)=>{
				return prev+next;
			},0)
			return result;
		}
	}
})
export default useInfoStore;

8. 使用getters
   组件infoCom.vue

<template>
	<div class="info">
		<h1>{{infoStore.total}}</h1>
	</div>
</template>

<script steup lang="ts">
	import useInfoStore from '../../store/modules/info';
	let infoStore =useInfoStore();
</script>