3、Vue 3 Pinia 使用实录：模块化定义 store 及其使用

嗨，我是温新

在 Pinia 中，根据功能进行模块化定义 state 存储模块，便于提高代码的可维护性和可复用性。只要你愿意，你可以将它拆分为更小的 state。

怎么理解 state？把它看做是一个数据表，使用时，当使用属性来使用，这样或许更好理解。

本篇文章使用多种方式来演示 state 的使用。

store 的定义与基础使用

假设有很多组件需要使用用户信息，那么，我们定义一个专门用于存储用户信息的 state。

1、定义 store

src/stores/user.ts

// 1、导入创建 store 的 defineStore 函数
import { defineStore } from "pinia";
import { ref } from "vue";

// 2、创建名为 user 的 store
const useUserStore = defineStore('user', () => {
    // 2.1、定义全局响应式数据
    const username = ref("王美丽")
    const age = ref(18)

    // 2.2、定义全局更新数据人函数
    const updateUsername = (uname:string) => {
        username.value = uname
    }

    const updateAge = (uage:number) => {
        age.value = uage
    }

    // 2.3、返回一个对象，暴露可对外使用的数据
    return {
        username,
        age,
        updateUsername,
        updateAge
    }
})

// 3、到处 store
export default useUserStore

2、使用 store

src/App.vue

<template>
    <h3>Vue 3 Pinia 使用实录</h3>
    <div class="main">
        <!-- 3、使用用户仓库中用户的数据 -->
        <h3>{{ userStore.username }}</h3>
        <h3>{{ userStore.age }}</h3>
        <button @click="updateUsername">修改名称</button>
        <button @click="updateUserage">修改年龄</button>
    </div>
</template>

<script setup lang="ts">
    // 1、导入用户数据仓库
    import  useUserStore  from "@/stores/user.ts";

    // 2、实例化 userStore，使页面能够访问到用户数据仓库中的状态和方法
    const userStore = useUserStore()

    // 3、使用用户数据仓库的函数
    const updateUsername = () => {
    	userStore.updateUsername("王丽丽")
    }
    const updateUserage = () => {
    	userStore.updateAge(19)
    }

</script>

<style scoped>
    .main {
    	background-color: pink;
    }
</style>

在这里，我们使用了用户仓库中的数据，并定义了 2 个函数，用于更新用户名称和年龄。

3、测试效果

• 1、浏览器中访问 http://localhost:5173/ 将会看到 “王美丽 18”。
• 2、点击“修改名称”按钮
• 3、点击“修改年龄”按钮
• 4、完成后，将会看到数据发生了变化

4、思考为什么要通过函数修改

我们在 user.ts用户数据仓库中定义的数据是响应式的，这代表了什么？任何地方都可以直接进行修改。一切都很完美，一起来看看案例

4.1、直接修改用户数据

src/App.vue

...
<script setup lang="ts">
	...
    setTimeout(() => {
    	userStore.username = "王小小"
    }, 3000);

</script>
...

4.2、测试修改

• 1、从新访问 http://localhost:5173/
• 2、3 秒后，王美丽 将会被修改为 王小小
• 3、点击 “修改名称” 按钮，名称被修改为了 王丽丽

此时，就会发现这两种方法都可以更新数据，为什么还要多此一举，在用户数据仓库中定义函数来修改数据呢？

原因：数据仓库中使用了响应式数据，因此，在任何地方它都可以被修改，一旦项目复杂起来，一旦出现意料之外的结果，那么，排查起来很难。因为，它是在哪个组件中被错修改了？

而把数据修改的操作统一到数据仓库中，那么，一旦出现错误，是不是就很容易排查了。