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

原创已于 2024-03-12 14:26:25 修改 · 510 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端框架 #vue3

于 2023-07-12 17:19:29 首次发布

vue3 专栏收录该内容

8 篇文章

订阅专栏

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

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

安装pinia

npm i pinia

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

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

在入口文件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')

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

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

获取并使用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>

修改store数据：

组件中直接修改（不推荐，可读性和可维护性差）
组件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>

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>

计算属性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;

使用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>