vue3+pinia的快速入门使用教程
更新时间：2022年07月15日 09:00:32 作者：温情key
Pinia是Vue的一个存储库,它允许你跨组件/页面共享状态,下面这篇文章主要给大家介绍了关于vue3+pinia的快速入门使用,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
1. pinia介绍
官网关于pinia的介绍
Pinia 是一个状态管理库，由 Vue 核心团队维护，对 Vue 2 和 Vue 3 都可用。
现有用户可能对 Vuex 更熟悉，它是 Vue 之前的官方状态管理库。由于 Pinia 在生态系统中能够承担相同的职责且能做得更好，因此 Vuex 现在处于维护模式。它仍然可以工作，但不再接受新的功能。对于新的应用程序，建议使用 Pinia。
事实上，Pinia 这款产品最初是为了探索 Vuex 的下一个版本，整合了核心团队关于 Vuex 5 的许多想法。最终，我们意识到 Pinia 已经实现了我们想要在 Vuex 5 中提供的大部分内容，因此决定将其作为新的官方推荐。
相比于 Vuex，Pinia提供了更简洁直接的 API，并提供了组合式风格的 API，最重要的是，在使用 TypeScript 时它提供了非常好的类型推导。
2. 安装
npm install pinia --save
3. 使用
1. src文件夹下新建store/index.js
import { createPinia } from "pinia";
// 创建store实例
const store = createPinia();
export default store;
2. main.ts引入
import store from '@/store/index.js' const app = createApp(App); app.use(store);
3.store下新建js文件，比如userInfo.js
import { defineStore } from 'pinia'
export const userStore = defineStore({
id: 'userInfo', // 命名，唯一
state: () => {
return {
userInfo: {}
}
},
actions: {
setUserInfo(data) {
// 可直接通过this访问state属性
this.userInfo = data;
},
}
})
4. 页面使用
import { userStore } from "@/store/userInfo.js";
export default defineComponent({
setup() {
const store = userStore();
console.log('store实例', store);
return {}
},
补充：存储状态并持久化存储
安装 pinia-persistedstate-plugin
npm install pinia-persistedstate-plugin
store>index.ts
import type { App } from "vue";
import { createPinia } from "pinia";
import { createPersistedState } from "pinia-persistedstate-plugin";
const store = createPinia();
store.use(createPersistedState());
export function setupStore(app: App<Element>) {
app.use(store);
}
export { store };二次刷新，数据用以持久化存储。
总结
到此这篇关于vue3+pinia的快速入门使用的文章就介绍到这了,更多相关vue3+pinia使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue+Vant实现顶部搜索栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了Vue路由传参props解耦的三种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要给大家介绍了关于vue单文件中引用路径处理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
这篇文章主要介绍了Vue echarts封装的实现，Echarts，它是一个与框架无关的JS图表库，但是它基于JS，这样很多框架都能使用它2023-01-01
使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）
这篇文章主要介绍了使用vue.js2.0 + ElementUI开发后台管理系统详细教程（一）的相关资料,需要的朋友可以参考下2017-01-01
众所周知Element 是一套 Vue.js 后台组件库，它能够帮助你更轻松更快速地开发后台项目。下面这篇文章主要给大家介绍了关于利用vue + element实现表格分页和前端搜索的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-12-12
这篇文章主要介绍了Vue中的errorHandler异常捕获问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue安装和使用教程，用了很久css预编译器，但是一直不太清楚到底用的sass还是scss，直到有天被问住了有点尴尬，感兴趣的朋友一起看看吧2018-10-10
这篇文章主要介绍了Vant实现上传多个图片或视频,更改视频预览图，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
今天小编就为大家分享一篇vue-form表单验证是否为空值的实例详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
最新评论