“从零开始：Pinia快速入门指南“！！

Pinia简介

Pinia 是一个专为 Vue 3 设计的状态管理库，它的设计目标是提供一个更简洁、更直观的 API，使得状态管理变得更容易理解和使用。它的前身 是Vuex5,它是Vuex5的下一个迭代实验，它实现了Vuex5中的大部分功能。 它最大特点是 轻量级： 相比于 Vuex，Pinia 更加轻量，没有不必要的抽象层，这有助于提高性能和减小包大小。

pinia实战

引入pinia 输入如下指令

D:\project>npm instasll pinia

接下来我们用pinia来实战一下吧！！新建store文件夹

 

我们首先呢从 "pinia" 模块中导入了 createPinia 函数。createPinia 是 Pinia 提供的创建 store 实例的主要函数，它可以帮助我们一个个store实例。接下来呢输入const store = createPinia(); 这里调用了 createPinia() 函数，它返回一个新的 Pinia store 实例。 最后我们用export default store;默认抛出即可

 我们创建好了store这个仓库的话，如何让它在整个项目中全局生效呢？我们可以执行如下操作 我们在main.js中引入store这个实例仓库，并将其挂载。

接下来我们就会去想如何去使用我们创建好的store实例,于是我们在store文件夹下面创建user.js,并在pinia中引入defineStore,由于我们在main.js中使用了store,那么defineStore 好比是store的一个影子分身,是store的一部分。我们创建一个名称为useUserStore的defineStore实例，并传一个对象参数。这个对象用id(useUserStore这个部分仓库的唯一标识) 和state(数据源)两个属性组成

我们会想我们如何修改useUserStore这个部分仓库中的数据呢？我们先了解下computed 函数computed 函数是 Vue.js 提供的一种机制，用于创建依赖于其他响应式属性的派生属性。这个派生属性也是响应式的，会在依赖的数据变化时自动重新计算。computed 函数接收一个箭头函数作为参数，这个函数返回你想要计算的值。那如果我们不这样干呢？不借助computed采用其它方法当仓库中的数据发生变化时候页面也能重新更改渲染，为了达到效果我们可以执行如下操作

由上可看出我们引入了一个名为UpdateUser的子组件,里边的button按钮绑定了一个可直接修改仓库中数据的点击事件,当我们点击后便可成功修改了！！ 点击前

 点击后

这种根据绑定事件而直接修改仓库数源的值固然可以,但是如果每个人都这样改的话那么会使得仓库管理很乱,所以官方提供了一个actions模块,这个actions模块专门用来修改state

我们把仓库中数据变成响应式方法有采用computed函数接收一个箭头函数作为参数，这个函数返回要计算的值。或者从pinia中引入storeToRefs具体步骤如下：

const {userInfo}=storeToRefs(userStore)中storeToRefs(yourStore) 将 useStore 中的所有状态转换为 refs,{ userInfo } = storeToRefs(useStore) 解构了转换后的结果，现在 userInfo 是一个 ref。

getters-仓库中的计算属性

在 Vuex（Vue.js 的状态管理模式）中，getters 类似于 Vue.js 组件中的计算属性（computed properties）。它们主要用于将应用的 state（状态）映射成派生状态，也就是说，getters 可以基于 state 返回新的衍生数据，这些数据通常是 state 的计算结果。假如我们想要得到十年之后的年龄。我们可以执行下面的代码

 界面显示如下：

persist-数据持久化 

当我们前端界面刷新后得到的结果会被重置,这是因为js会重新执行一遍代码。为了解决上述出现的问题,我们可以执行如下代码。

同时插件也是必须的,输入如下命令 

 输入如下代码

 这样数据的持久化就完成啦！！！ 感谢大家观看！！请点赞评论转发！！