上篇文章： 【Vue】Vue3.0（十一）Vue 3.0 中 computed 计算属性概念、使用及示例
🏡作者主页：点击！
🤖Vue专栏：点击！
⏰️创作时间：2024年11月10日15点23分
文章目录
- 一、前言
- 二、Pinia基础与setup语法糖的融合
- （一）理解Pinia的核心优势
- （二）setup语法糖简介
- 三、Pinia的安装与基本配置
- （一）安装Pinia
- （二）在项目中配置Pinia
- 四、创建和使用Store
- （一）创建一个简单的Store示例
- （二）在组件中使用Store（基于setup语法糖）
- 五、深入理解State在setup中的使用
- （一）响应式State的原理
- （二）直接修改State
- 六、Getters的灵活运用
- （一）计算属性风格的Getters
- （二）传递参数的Getters
- 七、强大的Actions功能
- （一）同步和异步Actions
- （二）在组件中调用Actions
- 八、Store之间的交互
- （一）在不同Store中共享数据和方法
- 九、结论
一、前言
在Vue 3.0的开发中，高效的状态管理是构建大型应用的关键。Pinia作为专为Vue 3设计的状态管理库，结合setup语法糖，能让我们更优雅地处理应用状态。本文将详细阐述在使用setup语法糖的情况下，Pinia在Vue 3.0中的使用细节。
二、Pinia基础与setup语法糖的融合
（一）理解Pinia的核心优势
Pinia提供了一种简洁且直观的方式来管理应用状态。与传统的状态管理方式相比，它具有更好的类型推断、更灵活的模块结构，在与Vue 3.0的setup语法糖配合时，能减少大量样板代码。
（二）setup语法糖简介
setup函数是Vue 3.0中一个新的组件选项，它在组件创建之前执行。在这个函数中，可以使用Composition API来组织逻辑。使用setup语法糖可以让我们更方便地在组件中引入和使用Pinia的Store。
三、Pinia的安装与基本配置
（一）安装Pinia
通过npm安装Pinia到Vue 3.0项目中：
npm install pinia
（二）在项目中配置Pinia
在main.js（或main.ts）中，创建并挂载Pinia实例：
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount('#app');
四、创建和使用Store
（一）创建一个简单的Store示例
创建一个名为counterStore.js（或counterStore.ts）的文件：
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++;
}
}
});
（二）在组件中使用Store（基于setup语法糖）
在Vue组件中：
<template>
<div>
<p>Count: {{ counterStore.count }}</p>
<p>Double Count: {{ counterStore.doubleCount }}</p>
<button @click="counterStore.increment">Increment</button>
</div>
</template>
<script setup>
import { useCounterStore } from './counterStore';
const counterStore = useCounterStore();
</script>
另外一个例子：
count.ts
import { defineStore } from "pinia";
export const useCountStore = defineStore(
'count',
//pinia中真正存储数据的地方
{
actions:{
increment(value: number){
this.sum+=value
}
},
state(){
return{
sum:6
}
}
}
);
在count中我要实现对store中sum值的增减，那写法有三种：
- //第一种 修改某个值的时候，这种的修改最为方便
countStore.sum+=n.vaue
//第二种 ：需改多个值的时候这种使用的较多
countStore.$patch({
})
- //第三种:当对数据的处理方法也被别的组件使用，需要对这个数据处理的动作形成一个公共的方法的话，需要在store中形成一个action，然后再在vue中的调用
countStore.increment(n.value) //这个是一个store中的action
Count.vue
<template>
<div class="count">
<h2>当前求和为：{{countStore.sum}}</h2>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="add">加</button>
<button @click="minus">减</button>
</div>
</template>
<script lang="ts" setup name="Count">
import { reactive, ref } from 'vue';
//引入pinia中的数据
import {useCountStore} from '@/store/count'
import { log } from 'console';
//数据
//使用store得到一个count相关的store
const countStore =useCountStore();
let n =ref(1); //用户选择的数字
//方法
function add(){
// sum.value+=n.value
//第一种 修改某个值的时候，这种的修改最为方便
countStore.sum+=n.vaue
//第二种 ：需改多个值的时候这种使用的较多
countStore.$patch({
})
//第三种:当对数据的处理方法也被别的组件使用，需要对这个数据处理的动作形成一个公共的方法的话，需要在store中形成一个action，然后再在vue中的调用
countStore.increment(n.value)
}
function minus(){
// sum.value-=n.value
}
</script>
<style scoped>
.count {
background-color: skyblue;
padding: 10;
border-radius: 10px;
box-shadow: 0 0 10px;
}
select,button {
margin: 0 5px;
height: 25px;
}
</style>
五、深入理解State在setup中的使用
（一）响应式State的原理
在Pinia的Store中，state是响应式的。当使用setup语法糖时，这种响应式机制无缝衔接。这是因为Pinia内部使用了Vue 3.0的响应式系统，对state进行了包装，使得在组件中使用时，能够自动更新视图。
（二）直接修改State
虽然可以直接通过this.count++这样的方式在actions中修改state，但不建议在组件中直接修改store的state。应该通过定义好的actions来保证数据的一致性和可维护性。
六、Getters的灵活运用
（一）计算属性风格的Getters
Getters在Pinia中类似于计算属性。在setup中使用时，它们会根据依赖的state自动计算和缓存结果。例如，doubleCount这个getter会在count变化时重新计算。
（二）传递参数的Getters
除了简单的计算属性风格的getters，Pinia还支持带有参数的getters。这可以让我们根据不同的条件计算出不同的值。例如：
getters: {
multiplyCount: (state) => (factor) => state.count * factor
}
在组件中使用：
<template>
<div>
<button @click="console.log(counterStore.multiplyCount(3))">Multiply by 3</button>
</div>
</template>
七、强大的Actions功能
（一）同步和异步Actions
Actions可以是同步或异步的。同步actions如increment可以直接修改state。异步actions则可以用于处理网络请求等异步操作。例如：
actions: {
async fetchData() {
const response = await fetch('https://example.com/data');
const data = await response.json();
// 处理数据并可能修改state
}
}
（二）在组件中调用Actions
在setup中，可以直接调用store的actions。对于异步actions，可以使用async/await来处理异步流程。例如：
<template>
<div>
<button @click="fetchData">Fetch Data</button>
</div>
</template>
<script setup>
import { useCounterStore } from './counterStore';
const counterStore = useCounterStore();
const fetchData = async () => {
await counterStore.fetchData();
};
</script>
八、Store之间的交互
（一）在不同Store中共享数据和方法
有时候，不同的Store之间需要共享数据或调用彼此的方法。可以通过在一个Store中引入另一个Store来实现。例如，如果有一个userStore和counterStore，userStore可以在某个action中调用counterStore的方法：
import { defineStore } from 'pinia';
import { useCounterStore } from './counterStore';
export const useUserStore = defineStore('user', {
state: () => ({
username: 'default'
}),
actions: {
resetCounter() {
const counterStore = useCounterStore();
counterStore.count = 0;
}
}
});
九、结论
在Vue 3.0中，结合setup语法糖使用Pinia可以让状态管理变得更加简洁、高效和灵活。通过深入理解和运用Pinia的各个特性，我们能够更好地构建复杂的应用程序，提高代码的可维护性和可读性，从而为用户带来更优质的体验。
