vue3 状态管理之pinia组合式API

pinia两种写法：选项式API 和组合式API
选项式 API 是在组合式 API 的基础上实现的，易于学习和使用（写代码的位置已经约定好了）。
选项式 API缺点: 代码组织性差，相似的逻辑代码不便于复用，逻辑复杂、代码多了不好阅读。虽然提供了 mixins 用来封装逻辑，但是出现数据函数覆盖的概率很大，不好维护。
关于选项是API的写法，详见我的另一篇文章–>pinia之选项式API，
本篇文章，我们重点讲解组合式API。组合式 API的学习成本可能会增加，需要良好的代码组织能力和拆分逻辑能力。
组合式API优点：

提供了更好的逻辑复用：能够通过“组合函数”来实现更加简洁高效的逻辑复用。“组合式函数”（-Composables） 是一个利用Vue的组合式 API 来封装和复用有状态逻辑的函数。
具有更灵活的代码组织：与同一个逻辑关注点相关的代码可以放在一起，不需要再为了一个逻辑关注点在不同的选项块间来回滚动切换。随时将功能的一部分拆分出去。具有更好的类型推导，这对代码压缩更友好，因为本地变量的名字可以被压缩，但对象的属性名则不能。

组合式API写法

安装pinia

npm i pinia

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

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

在入口文件中引入仓库

import store from './store';
app.use(store);// 注册仓库

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

import { defineStore } from 'pinia';
import { ref } from 'vue'
// 创建小仓库
const useTodoStore = defineStore('todo', () => {
	let todos = ref([{id:1,title:'吃饭'},{id:2,title:'睡觉'},{id:3,title:'打豆豆'}])
	// 务必要返回一个对象：属性与方法可以提供给组件使用
	return {
		todos
	}
});
export default useTodoStore

获取并使用store数据：
组件中：

<template>
	<div class="todo">
		<p>{{todoStore.todos}}</p>
	</div>
</template>

<script steup lang="ts">
import useInfoStore from '../../store/modules/todo';
// 引入组合式API函数仓库
let todoStore =useTodoStore();
</script>

修改数据
组件中：

<template>
	<div class="todo">
		<p @click="updateTodo">{{todoStore.todos}}</p>
	</div>
</template>

<script steup lang="ts">
import useInfoStore from '../../store/modules/todo';
// 引入组合式API函数仓库
let todoStore =useTodoStore();
//点击p标签，修改数据
const updateTodo = () => {
	todoStore.updateTodo();
}
</script>

仓库中：/modules/

import { defineStore } from 'pinia';
import { ref } from 'vue'
// 创建小仓库
const useTodoStore = defineStore('todo', () => {
	let todos = ref([{id:1,title:'吃饭'},{id:2,title:'睡觉'},{id:3,title:'打豆豆'}])
	// 务必要返回一个对象：属性与方法可以提供给组件使用
	return {
		todos,
		updateTodo() {
            todos.value.push({ id: 4, title: '组合式API方法' });
        }
	}
});
export default useTodoStore

计算属性，引入computed
仓库中： /modules/

import { defineStore } from 'pinia';
import { ref,computed } from 'vue'
// 创建小仓库
const useTodoStore = defineStore('todo', () => {
	let arr = ref([1,2,3,4,5]);
	const total = computed(() => {
		return arr.value.reduce((prev,next) => {
			return prev + next
		});
	});
	// 务必要返回一个对象：属性与方法可以提供给组件使用
	return {
		total
	}
});
export default useTodoStore

使用计算属性的值：
组件中：

<template>
	<div class="todo">
		<h1>{{todoStore.total}}</h1>
	</div>
</template>

<script steup lang="ts">
import useInfoStore from '../../store/modules/todo';
// 引入组合式API函数仓库
let todoStore =useTodoStore();
</script>

秒客网

vue3 状态管理之pinia组合式API

组合式API写法

相关文章