vue3+pinia的快速入门使用教程

目录
  • 1. pinia介绍
  • 2. 安装
  • 3. 使用
    • 1. src文件夹下新建store/index.js
    • 2. main.ts引入
    • 3.store下新建js文件，比如userInfo.js
    • 4. 页面使用
  • 补充：存储状态并持久化存储
  • 总结

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使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue3中vuex与pinia的踩坑笔记记录

    目录 介绍 安装使用 简单对比写法差异与共同点 Vuex 和 Pinia 的优缺点 何时使用Pinia,何时使用Vuex 总结 介绍 Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎.它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库. Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性.存储模块组织.状态变化分组.多存储创建等). 另一方面,Vuex也是为Vue框架建立的一个流行的状态管理库,它也是Vue核心团队推荐的状态管理库.Vuex高度关注应

  • Vue3状态管理之Pinia的入门使用教程

    目录 Vue3 新的发展方向(来源于尤大知乎) 一.Pinia 简介与基础 1.1 Pinia 简介 1.2 Pinia 基础 二.Pinia 在Vue3-Vite中的使用 2.1 基础使用流程 2.2 state 中数据的解构访问 2.3 state 中数据的修改方式(actions和组件中) 2.4 getters 的使用 三.Pinia 数据持久化 总结 Vue3 新的发展方向(来源于尤大知乎) Vue 3 将在 2022 年 2 月 7 日 成为新的默认版本 基于 Vite 的极速构建工

  • vue3搭配pinia的踩坑实战记录

    vue3搭配pinia的踩坑实战记录

    目录 前言 An Object could not be cloned? VUE 3的toRaw PINIA与VUE 3可以混合搭配? 同样的操作在VUE 3下的结果 最后的解决方式 总结 前言 最近接手了一个新项目,用的是VUE3+pinia的组合.由于之前没有用过这2个库,只能现学现做.幸运的是这两者的上手难度都不大,项目可以正常开发.但这其中也遇到了一些坑,今天就来讲其中我印象最深的一个. An Object could not be cloned? 不知道有多少开发者遇到过这个报错——A

  • vue3+pinia的快速入门使用教程

    目录 1. pinia介绍 2. 安装 3. 使用 1. src文件夹下新建store/index.js 2. main.ts引入 3.store下新建js文件,比如userInfo.js 4. 页面使用 补充:存储状态并持久化存储 总结 1. pinia介绍 官网关于pinia的介绍 Pinia 是一个状态管理库,由 Vue 核心团队维护,对 Vue 2 和 Vue 3 都可用. 现有用户可能对 Vuex 更熟悉,它是 Vue 之前的官方状态管理库.由于 Pinia 在生态系统中能够承担相同的

  • Vue.js快速入门实例教程

    什么是vue vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.基本结构 index.html代码: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <

  • NodeJS中的MongoDB快速入门详细教程

    MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的. 一.MongoDB必须理解的概念 1.数据库:每个数据库都有自己的权限和集合. 2.文档:一个键值对. 3.集合:一组文档,即一组键值对.当第一个文档插入时,集合就会被创建. 二.Mac下的MongoDB安装和启动 1.使用brew进行安装:brew ins

  • mybatis快速入门学习教程新手注意问题小结

    mybatis快速入门学习教程新手注意问题小结

    什么是mybatis MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis使用简单的XML或注解用于配置和原始映射,将接口和Java的POJOs(Plan Old Java Objects,普通的Java对象)映射成数据库中的记录. orm工具的基本思想 无论是用过的hibernate,mybatis,你都可以法相他们有一个共同点: 1. 从配置文件(通常是XML配置文件中)得到 ses

  • MyBatis Plus工具快速入门使用教程

    MyBatis-plus有什么特色 1.代码生成 2.条件构造器 对我而言,主要的目的是使用它强大的条件构建器. 快速使用步骤: 1.添加pom文件依赖 <dependency> <groupId>org.apache.velocity</groupId> <artifactId>velocity</artifactId> <version>1.7</version> </dependency> <dep

  • Go语言快速入门图文教程

    Go语言快速入门图文教程

    推荐阅读: go语言最新版激活教程可以点下这个链接查看. goland永久安装教程,点击此处查看. Go 这几年很火,小哈也蹭业余时间悄咪咪学习一下(我大 Java 依旧无敌

  • FluentMybatis快速入门详细教程

    使用fluent mybatis可以不用写具体的xml文件,通过java api可以构造出比较复杂的业务sql语句,做到代码逻辑和sql逻辑的合一. 不再需要在Dao中组装查询或更新操作,在xml或mapper中再组装参数. 对底层数据表关联关系的处理,我们总是绕不开什么一对一,一对多,多对多这里比较烦人的关系. 业界优秀的ORM框架也都给出了自己的答案,简单来说就以下几种方式: hibernate和JPA对开发基本屏蔽了底层数据的处理,只需要在model层设置数据级联关系即可.但这种设置也往往

  • Vue + OpenLayers 快速入门学习教程

    Vue + OpenLayers 快速入门学习教程

    Openlayers 是一个模块化.高性能并且功能丰富的WebGIS客户端的JavaScript包,用于显示地图及空间数据,并与之进行交互,具有灵活的扩展机制. 简单来说,使用 Openlayers(后面简称ol) 可以很灵活自由的做出各种地图和空间数据的展示.而且这个框架是完全免费和开源的. 前言 本文记录 Vue 使用 OpenLayers 入门,使用 OpenLayers 创建地图组件,分别使用 OpenLayers 提供的地图和本地图片做为地图. Overview OpenLayers

  • Fluent Mybatis快速入门详细教程

    使用fluent mybatis可以不用写具体的xml文件,通过java api可以构造出比较复杂的业务sql语句,做到代码逻辑和sql逻辑的合一. 不再需要在Dao中组装查询或更新操作,在xml或mapper中再组装参数.喜欢的朋友可以阅读这篇文章   http://www.jb51.net/article/218884.htm 对底层数据表关联关系的处理,我们总是绕不开什么一对一,一对多,多对多这里比较烦人的关系. 业界优秀的ORM框架也都给出了自己的答案,简单来说就以下几种方式: hibe

  • Yii快速入门经典教程

    本文讲述了Yii快速入门教程.分享给大家供大家参考,具体如下: Ⅰ.基本概念 一.入口文件 入口文件内容:一般格式如下: <?php $yii=dirname(__FILE__).'/../../framework/yii.php';//Yii框架位置 $config=dirname(__FILE__).'/protected/config/main.php';//当前应用程序的主配置文件位置 // 部署正式环境时,去掉下面这行 // defined('YII_DEBUG') or define

随机推荐