vue3中pinia的使用及持久化的实现
解释一下pinia：
Pinia是一个基于Vue3的状态管理库，它提供了类似Vuex的功能，但是更加轻量化和简单易用。Pinia的核心思想是将所有状态存储在单个store中，并且将store的行为和数据暴露为可响应的API，从而实现数据（或方法）在各个组件之间的共享和修改；
1、新建一个vue3项目，并导入pinia的依赖：
npm install pinia
2、在main.ts中引入pinia：
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.use(router)
app.mount('#app')
3、在src目录下，新建一个stores文件夹。我们在这个文件夹中进行pinia的使用；
新建一个counter.ts文件，在这个文件中定义一个变量count，使这个count变量能被所有的组件共享，并修改其值；
countrt.ts的代码如下：
import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
// 定义一个方法，直接清空count
const clearCount = () => {
count.value=0
}
return { count,clearCount}
})解释一下：
defineStore ：是pinia使用中必须要引入的一个函数，它是用于定义一个新的store的函数。
在Pinia中，每个store都需要使用defineStore函数进行定义，并传入一个配置对象来描述store的行为和数据。
defineStore 一般要传递两个参数，第一个是store函数的名称，一般这个名称要做到见名知义、第二个是这个store函数的具体逻辑。
可以在这里面定义属性、方法等。但是这些定义过的属性和方法一定要通过return交出去才行
如上图，我们顶义一个count变量，并通过return返回了出去。那么现在就可以在任意组件中查看count的值，并进行修改了。
4、使用pinia：
要在组件中使用pinia定义的store函数，第一步是要先引入store：
import { useCounterStore } from '@/stores/counter';第二步，定义一个参数来接收这个useCounterStore函数：
const counterStore = useCounterStore();
第三步，直接在需要的位置引入counterStore中的参数即可
(可以是属性，也可以是方法。但是有一点要注意，就是必须要是return交出去的才可以；)
从pinia中取到的数据{{ counterStore.count }}
<button @click="counterStore.clearCount">清空count</button>
属性或者方法都可以直接使用，只要你在return中交出去了
启动vue3项目，查看
可以看到确实能获取到pinia中定义的数据count；
如果想要修改count，可以直接在数值上修改：
const addCount = () => {
counterStore.count++;
}定义一个按钮，并绑定事件：修改结果如图：
这个修改是全局的，你在另一个组件中也可以观察到pinia中数据的变化：
但是pinia有一个不好的地方就是它默认是内存存储，你只要一刷新浏览器就会丢失数据。
我们这时候可以借助pinia的持久化插件persist来解决；
1、下载persist持久化插件：
npm install pinia-plugin-persistedstate
2、在pinia中使用persist
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
// 1、pinia的持久化插件
import { createPersistedState } from 'pinia-plugin-persistedstate'
const app = createApp(App)
//2、 接收createPersistedState函数
const piniaPersistedState = createPersistedState()
const pinia = createPinia()
// 3、在pinia中引入持久化插件
pinia.use(piniaPersistedState)
app.use(pinia)
app.use(router)
app.mount('#app')
3、在定义状态store的时候指定持久化配置参数：{persist：true}
import { ref } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
// 定义一个方法，直接清空count
const clearCount = () => {
count.value=0
}
return { count,clearCount}
},
{persist: true}
)
引入了pinia的持久化插件之后，我们再刷新页面，那么piniade的store函数中的数据也就持久的保存了。
其实这个插件底层也是使用了localstorage，将数据存储到了浏览器中。
到此这篇关于vue3中pinia的使用及持久化的实现的文章就介绍到这了,更多相关vue3 pinia使用及持久化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue $router和$route的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
最近做项目结构优化,前端项目都是部署在nginx上,想实现同一个端口可以访问多个前端项目,所以就有了本文,这篇文章主要给大家介绍了关于Nginx同一端口部署多个前后端分离的vue项目的相关资料,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Vue中直接操作数组索引不奏效的问题解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要为大家详细介绍了Vuex实现简单购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-01-01
使用v-model绑定布尔变量实现全选功能：定义数组存储状态,使用v-for循环渲染选择框,绑定状态；添加全选复选框,绑定布尔变量；使用watch监听全选复选框状态变化,更新数组中每一项的状态2025-01-01
这篇文章主要介绍了vue中post请求以a=a&b=b 的格式写遇到的问题,需要的朋友可以参考下2018-04-04
在本篇文章里小编给大家分享的是一篇关于Vue—v-bind动态绑定class的知识点内容，有需要的朋友们可以参考下。2020-01-01
这篇文章主要为大家介绍了npm run dev报错信息及解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要介绍了el-table实现转置表格的示例代码(行列互换),本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-02-02
这篇文章主要介绍了Vue项目部署到IIS后，刷新报错404,这里需要用到URL重写工具 --URL Rewrite，需要的话需要自己下载安装，本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
最新评论