序言

我们在上一篇文章讲了如何通过Vuex实现组件之间数据的通讯交流，但是在Vue项目开发过程中，我们还有一个好用的数据管理工具——Pinia🍍。相较于Vuex,在Pinia我们省去了Vuex给我们带上的脚链，让我们可以在store这个仓库里面不羁放纵….

开始之前，首先来看看我们今天Demo的效果吧，Demo不难，重在认识Pinia🍍

今天我们就依然借助这个TodoList这个简单的Demo来来认识一下我们今天的这位新朋友——Pinia🍍

一、项目初始化 VueCli | Vite

今天我们依然是一个Vue项目，但是我们都知道vite同样是Vue团队开发的新一代脚手架。那么Vite相比Vue Cli脚手架他们之间有什么区别呢？

• 简言概括其区别就是Cli更像一位老者，它诞生于Vue，仅支持Vue，并且内容丰富，为我们的项目开发考虑周全，就差把饭喂进我们嘴里了。

• 而Vue团队开发Vite就是想把Vite做成一个通用的构建工具而不只限制于Vue，它更加的轻便小巧，并且因为在开发环境中使用的ES6浏览器原生的ES6modules，无需对代码进行打包直接让浏览器使用。 省去了打包过程中冗余的代码解析过程，便使得项目运行更加流畅迅捷。 所以在小型项目中，我们更倾向于使用Vite脚手架。

对于Vite如何项目初始化，这里我们主要给大家介绍一下其与VueCli的区别，关于如何选择，你们才是玩家！这里我把教程贴在下方，各位看官自己去玩吧！

VueCli项目初始化

Vite项目初始化

二、开始Pinia🍍

1. 这里，我们选择通过node.js提供的包管理工具直接下载Pinia的相关依赖

当然大家也可以选择yarn等包管理工具进行下载

2. 安装完成之后，我们就开始进行进行数据模块化管理了。

在项目的store目录下我们创建了一个todo.js文件，用来构建待办事项数据管理模块。

// 导入 Vue 3 的 ref 函数和 Pinia 的 defineStore 函数
import { ref } from 'vue'
import { defineStore } from 'pinia'

// 定义一个名为 "todo" 的数据管理模块，并使用 defineStore 函数
export const useTodoStore = defineStore("todo", () => {
    // 使用 ref 函数创建一个响应式的数据变量 todos，初始包含一个对象元素
    const todos = ref([
        { txt: '人生不就是大起大落' }
    ])

    // 定义一个名为 addTodo 的函数，用于向 todos 数组添加一个新的对象元素
    const addTodo = () => {
        todos.value.push({ txt: '落' })
    }

    // 返回定义的数据变量和函数，使其可以在组件中使用
    return {
        todos,
        addTodo
    }
})

3. 有了响应式数据与对应的方法之后，我们就可以拿到组件中去操作使用啦！

在src目录下components文件下我们创建一个TodoList.vue组件，专门用来展示和通过点击按钮来显示数据。

// 导入 Vue 3 的 ref 函数和 Pinia 的 defineStore 函数
import { ref } from 'vue'
import { defineStore } from 'pinia'

// 定义一个名为 "todo" 的数据管理模块，并使用 defineStore 函数
export const useTodoStore = defineStore("todo", () => {
    // 使用 ref 函数创建一个响应式的数据变量 todos，初始包含一个对象元素
    const todos = ref([
        { txt: '人生不就是大起大落' }
    ])

    // 定义一个名为 addTodo 的函数，用于向 todos 数组添加一个新的对象元素
    const addTodo = () => {
        todos.value.push({ txt: '落' })
    }

    // 返回定义的数据变量和函数，使其可以在组件中使用
    return {
        todos,
        addTodo
    }
})

4. 组件最终是要拿到其他组件中去使用的，那么我们就将这个组件引入注册到App.vue中使用！

在App.vue我们导入 TodoList 组件和 useTodoStore 数据管理模块,拿到todos数组中的响应式数据，以及操作这些数据的addTodo方法，之后我们就可以成功启动项目，看到效果啦！

<template>
  <!-- 包含了名为 TodoList 的组件，通过 props 传递 todoStore 中的 todos 数组和 addTodo 方法 -->
  <div>
    <TodoList 
      :todos="todoStore.todos" 
      :addTodo="todoStore.addTodo"
    />
  </div>
</template>

<script setup>
    
import TodoList from './components/TodoList.vue'
import { useTodoStore } from './store/todos.js'

// 创建一个名为 todoStore 的数据管理实例
const todoStore = useTodoStore()

</script>

<style scoped>
/* 可选的样式，可以在这里添加组件的局部样式 */
</style>

总结

通过这个项目，相比于之前通过Vuex写的小Demo，我们在数据状态管理仓库中使用选项式API开发方式，这是因为Pinia给我们提供一种更加简单的状态管理方式。当然我们也可以在Pinia使用组合式API,比如state、getters、actions等，并且我们只需要从pinia中引入defineStore就可以创建多个store实例对象，对于业务组件开发简直不要太合适。除此之外，它的编程方式也更现代，用到的是现在最流行的 hooks 编程。

当然，各位同志们根据自身业务需求随意选择Vuex和pinia，因为归根结底两者只是业务流程中的开发工具，最终项目打包上线后依然是纯粹的HTML&CSS&JS。

那么最后今天的内容总结就是以下三点啦:

1. 数据存储到Pinia的Store:

   • 前端使用Pinia来进行状态管理，通过在store目录下创建todo.js文件，使用defineStore函数得到一个数据管理函数useTodoStore。
   • 通过调用useTodoStore，获取到todos等状态。

2. 组件(Views)请求数据:

   • 在Vue的组件中，可以通过import { useTodoStore } from './store/todo.js'引入useTodoStore函数。
   • 通过useTodoStore获取到todos等数据，将其传递给组件。

3. Pinia的优势:

   • Pinia提供了更简单的状态管理方式，通过defineStore函数轻松创建store。
   • 使用现代的hooks编程风格，例如通过useTodoStore获取状态。
   • 分离数据和UI组件，使得组件更加干净和可维护。

那么到了这里我们今天的文章就结束啦~

创作不易，如果感觉这个文章对你有帮助的话，点个赞吧♥

更多内容:【前端面试】一个TodoList小Demo 抢下 “Vue组件通讯” 赛点

ReacheMe: GitHub Gitee

原文链接：https://juejin.cn/post/7323271675330543643 作者：sAnL1ng