上篇文章： 【Vue】Vue3.0（十一）Vue 3.0 中 computed 计算属性概念、使用及示例

🏡作者主页：点击！

🤖Vue专栏：点击！

⏰️创作时间：2024年11月10日15点23分

一、前言

在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的各个特性，我们能够更好地构建复杂的应用程序，提高代码的可维护性和可读性，从而为用户带来更优质的体验。