【Vue】Vue3.0（十七）Vue 3.0中Pinia的深度使用指南（基于setup语法糖）

上篇文章： 【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项目中：

bash 复制代码

npm install pinia

（二）在项目中配置Pinia

在main.js（或main.ts）中，创建并挂载Pinia实例：

javascript 复制代码

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）的文件：

javascript 复制代码

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组件中：

html 复制代码

<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

typescript 复制代码

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

javascript 复制代码

<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。这可以让我们根据不同的条件计算出不同的值。例如：

javascript 复制代码

getters: {
  multiplyCount: (state) => (factor) => state.count * factor
}

在组件中使用：

html 复制代码

<template>
  <div>
    <button @click="console.log(counterStore.multiplyCount(3))">Multiply by 3</button>
  </div>
</template>

七、强大的Actions功能

（一）同步和异步Actions

Actions可以是同步或异步的。同步actions如increment可以直接修改state。异步actions则可以用于处理网络请求等异步操作。例如：

javascript 复制代码

actions: {
  async fetchData() {
    const response = await fetch('https://example.com/data');
    const data = await response.json();
    // 处理数据并可能修改state
  }
}

（二）在组件中调用Actions

在setup中，可以直接调用store的actions。对于异步actions，可以使用async/await来处理异步流程。例如：

html 复制代码

<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的方法：

javascript 复制代码

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