还在用vuex?来了解一下pinia

目录
  • 1.什么是pinia
  • 2.优势
  • 3.使用（非常简单）
  • 总结

1. 什么是pinia

通俗的讲 ：

① vuex精简版 ，而且vue官方更加推荐使用。

②优势又完胜于vuex ，下面我们来了解下pinia。

2.优势

pina vuex
pinia 同时支持vue2和vue3 vue2要用vuex 3 版本
vue3要用vuex 4 版本
不分同步异步，更好的ts支持 分同步异步，不太兼容ts
享受自动补全
…		 需要注入，导入函数，调用他们
…

3. 使用 （非常简单）

① 安装

npm install pinia

②在 main.js 中 加入

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'  //导入pinia
const  pinia = createPinia();        //调用创建pinia
createApp(App)
			.use(pinia)
			.mount('#app')

③去创建 pinia 仓库

一般选在 /src下的 store 文件夹下 例：创建为 pinia.js

/src/store/pinia.js 为：

import { defineStore } from 'pinia'
export const PiniaStore = defineStore('main',{  //导出 pinia仓库
    state:() => { //相当于全局的 data()
        return {
            name:'张三',
            age:18
        }
    },
    getters:{},  //相当于全局的computed
    actions:{}   //相当于全局methods
})

③使用 （非常容易）

以/src/view/index.vue 为例：

Vue3写法：

<template>
    <h3>{{pinia.name}}</h3>  <!--使用-->
    <h3>{{pinia.age}}</h3>
    <button @click="pinia.age++">修改pinia数据</button>   <!--修改-->
</template>
<script setup>
    import { PiniaStore } from '../../store/pinia'
    const pinia = PiniaStore();
</script>

Vue2写法：

<template>
	<div>
       <h3>{{pinia.name}}</h3>
       <h3>{{pinia.age}}</h3>
       <button @click="pinia.age++">修改pinia数据</button>
    </div>
</template>
<script>
    import { PiniaStore } from '../../store/pinia'
    export default {
			created(){const pinia = PiniaStore();}
	}
</script>

大家不用担心用pinia会出问题 ，官方已经明确说了pinia是vuex 5版本的理念，而且官方更推荐pinia而非vuex

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Vue生态的新成员Pinia的详细介绍

    目录 安装和配置 Store核心 State Getters Actions Vue Devtools 最后 结论 参考文献 Pinia是Vue应用程序的状态管理方案,是Vuex核心团队成员开发.感觉更像是常规的旧 javascript 导入模块,实现了很多Vuex5的提案. Pinia同时支持Vue2和Vue3,不过下面展示的例子都是使用Vue3,Pinia的版本是Pinia@2.0.9. Vue2和Vue3使用的Pinia版本有一点不同,因此请查看官方Pinia 文档以获取更多信息. 安装和

  • Vue状态管理之使用Pinia代替Vuex

    Vue状态管理之使用Pinia代替Vuex

    目录 1.Pinia是什么 2.Pinia简单上手 3.使用体验 1.Pinia是什么 Pinia是一个vue的状态管理方案,是vuex团队成员开发,实现了很多vuex5的提案,更加地轻量化且有devtools的支持 vuex4一直被人诟病对于typescript的支持不良好,vuex5也迟迟未来 所以有了pinia的出现 相较于vuex: pinia无需创建复杂的包装器来支持typescript,对于typescript类型判断是天然支持的,享受ide带来的自动补全,减少开发的心智负担,减少v

  • Vue新的状态管理库Pinia入门教程

    目录 前沿 使用教程 1.安装 2.vue中引入 3.基本使用 4.也可以像vuex一样使用 为什么最近Pinia会火起来呢,主要在于Vue3推出来的时候,Vuex对于Vue3的组合式Api支持的不是特别好,也就是在这个时候Pinia出现了. 前沿 Vue官方推荐的状态管理库是Vuex,那为什么最近Pinia会火起来呢,主要在于Vue3推出来的时候,Vuex对于Vue3的组合式Api支持的不是特别好,也就是在这个时候Pinia出现了,最重要的是,Pinia不但支持Vue3,同时还支持Vue2,这

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

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

  • 还在用vuex?来了解一下pinia

    目录 1.什么是pinia 2.优势 3.使用(非常简单) 总结 1. 什么是pinia 通俗的讲 : ① vuex精简版 ,而且vue官方更加推荐使用. ②优势又完胜于vuex ,下面我们来了解下pinia. 2.优势 pina vuex pinia 同时支持vue2和vue3 vue2要用vuex 3 版本vue3要用vuex 4 版本 不分同步异步,更好的ts支持 分同步异步,不太兼容ts 享受自动补全… 需要注入,导入函数,调用他们… 3. 使用 (非常简单) ① 安装 npm inst

  • Vue替代vuex的存储库Pinia详细介绍

    Vue替代vuex的存储库Pinia详细介绍

    目录 前言 Pinia介绍 1. 创建一个Pinia store 2. 访问State 3. Pinia修改数据的四种方法 4. 重置State 5. 替换state 6. 订阅状态 7. Getters 与vuex比较 Pinia的优点 前言 vue3已经发布很长一段时间了,vue官网也已经默认访问vue3的文档了.因此打算系系统统仔仔细细的学习一波 使用官方提供的脚手架工具新建一个vue3项目会发现,官方已将pinia作为默认的状态存储库提供在安装选项中了. vuex的仓库中官方也有这么一段

  • TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结)

    TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结)

    目录 简介 安装 创建pinia并传递给vue实例 创建store state getters actions 在vue组件使用 获取state 获取getters 修改state 数据持久化 总结 简介 今天我们再来实战下官方推荐的新的vue状态管理工具Pinia. pinia 由 vue 团队中成员所开发的,因此也被认为是下一代的 vuex,即 vuex5.x,在 vue3 的项目中使用也是备受推崇.所以 pinia 的学习迫在眉睫. 下面我们正式开始pinia的学习吧. 安装 yarn a

  • JavaScript Pinia代替 Vuex的可行性分析

    JavaScript Pinia代替 Vuex的可行性分析

    目录 一.介绍 二.对比 三.使用 1. 安装 2. 注册 3. 创建单个 store 4. 组件内引用 5. 更新 store  数据的4种方式 (1)直接修改特定的值 (2)利用 $patch 批量修改 (3)利用 $patch 单个修改特定的值 (4)利用 Actions 修改 6. 其他 四.总结 一.介绍 在 Vue 3.0 出来之前,数据存储的主流依旧是 Vuex.但是,当 Vue 3.0 问世后,官方为了迎合 Componsition API,进而设计了全新的状态管理 Pinia,

  • 一文详解Pinia和Vuex与两个Vue状态管理模式

    一文详解Pinia和Vuex与两个Vue状态管理模式

    目录 前言 安装 挂载 Vuex Pinia 修改状态 vuex Pinia Pinia解构(storeToRefs) getters Pinia Vuex modules Pinia Vuex 写在最后 前言 Pinia和Vuex一样都是是vue的全局状态管理器.其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia. 本文将通过Vue3的形式对两者的不同实现方式进行对比,让你在以后工作中无论使用到Pinia还是Vuex的时候都能够游刃有余. 既然我们要

  • Vue.js状态管理之Pinia与Vuex详解

    目录 前言 Pinia 和 Vuex 简介 什么是Pinia? 什么是 Vuex? Pinia 的特点 模块化设计 完整的开发工具支持 Pinia 很直观 Pinia 是可扩展的 TypeScript 支持 Pinia 轻量的 Vuex的特点 模块 开发工具支持 热重载 TypeScript 支持 Pinia和Vuex的代码对比 Pinia 和 Vuex 的优缺点 Pinia 的优点 Pinia 的缺点 Vuex 的优点 Vuex 的缺点 我应该使用哪个:Pinia 还是 Vuex? 结论 前言

  • Pinia进阶setup函数式写法封装到企业项目

    Pinia进阶setup函数式写法封装到企业项目

    目录 开场 认识Pinia Pinia与Vuex代码分割机制 Pinia的常规用法 1. 安装 2. 挂载全局实例 3. 创建第一个store 4. 业务组件对store的调用 5. 良好的编程习惯 企业项目封装攻略 1. 全局注册机 重复打包问题 创建总入口 总线注册 打包解耦 2. Store组管理 场景分析 组级Store创建 单元Store 业务组件调用 效果 落幕 开场 Hello大家好,相信在座各位假如使用Vue生态开发项目情况下,对Pinia状态管理库应该有所听闻或正在使用,假如还

  • 全站最详细的Vuex教程

    什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性. 引入Vuex(前提是已经用Vue脚手架工具构建好项目) 1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm install vuex --save 要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的. 2.新建一个store文件夹(

  • 五分钟搞懂Vuex实用知识(小结)

    这段时间一直在用vue写项目,vuex在项目中也会依葫芦画瓢使用,但是总有一种朦朦胧胧的感觉.于是决定彻底搞懂它. 看了一下午的官方文档,以及资料,才发现vuex so easy! 作为一个圈子中的人,决定输出一下文档,如果你仔细看完这篇文章,保证你对vuex熟练掌握. 我把自己的代码上传到了github,大家有需要的可以拉下来:github 先说一下vuex到底是什么? vuex 是一个专门为vue.js应用程序开发的状态管理模式. 这个状态我们可以理解为在data中的属性,需要共享给其他组件

随机推荐