Vue3-pinia（状态管理）

pinia是什么？

这个是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，尤大推荐。因为其logo像是一个菠萝，所以我们还称呼它为大菠萝。

官网

https://pinia.vuejs.org/

下载

npm i pinia

使用

mian.js 中引入 pinia，全局注册

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const app = createApp(App)
app.use(createPinia())
app.mount('#app')

store文件夹新建 index.js 文件，支持TS的你就建立 index.ts,文件中引入 pinia 使用，用来存储状态

import {defineStore} from 'pinia'export const useUserStore = defineStore("USER",{state() {return {name: '景天',age: 18,name1: '胡歌',age1: 36}},// 和vuex一样getters: {},// 和vuex一样actions: {setAge() {this.age--}}
})

页面中使用 pinia 中存储的状态

<template><div>正常取值</div><div>{{User.name}}</div><div>{{User.age}}</div><div>解构取值</div><div>{{name}}</div><div>{{age}}</div><div>解构取值转ref</div><div>{{name1}}</div><div>{{age1}}</div><button @click="change1">change1</button><button @click="change2">change2</button><button @click="change3">change3</button><button @click="change4">change4</button><button @click="change5">change5</button><div><button @click="handleReset">重置</button></div>
</template><script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useUserStore } from './store';// 获取store中的值
let User = useUserStore()// 通过ES6的结构取值，但是这个值不是响应式的
let {name,age} = User// 通过pinia自带的方法，转换成ref，就是响应式的了
let {name1,age1} = storeToRefs(User)// 改变store中值的方式有五种
// 方式一
function change1() {User.age++
}
// 方式二，可一次性修改多个值，对象的形式
function change2() {User.$patch({name: '雪见',age: 17})
}
// 方式三，可一次性修改多个值，函数的形式
function change3() {User.$patch((state) => {state.name = '徐长卿'state.age = 19})
}
// 方式四，哪怕修改一个值，也要传所有值？？？
function change4() {User.$state = {name: '茂茂',age: 16,name1: '李逍遥',age1: 18}
}
// 方式五，借助actions
function change5() {User.setAge()//也可以传参// User.setAge(999)
}// 重置数据
function handleReset() {User.$reset()
}</script><style>
</style>

Vue3-pinia（状态管理）相关推荐

Vue3 - Pinia 状态管理，解构 store（Pinia storeToRefs API 详细使用教程）
目录前言 ES 解构方式(错误的) storeToRefs(正确的) 总结 SEO 前言解构啥意思呢?大家应该对 ES 传统方式解构非常了解,相同的,解构 store 也是如此. 假设你在状态管理 ...
vue3 pinia 状态管理（清晰明了）
前言最近学习cloud项目,前端使用到 vue3 + ts 等技术,其中包括 pinia ,从一脸懵到渐渐清晰过程,在此记录一下,若有不足,希望大佬可以指出. 中文官方文档:https://pini ...
Vue3 的状态管理库（Pinia）
目录前言: 一.什么是 Pinai 二.安装与使用pinia 三.什么是 store 四.state 1. 定义 state 2. 组件中访问 state 五.Getters 1. 定义 Gette ...
Vue中的Pinia状态管理工具 | 一篇文章教会你全部使用细节
文章目录 Pinia状态管理 Pinia和Vuex的对比 Pinia基本使用
vue--组合式Api、Pinia状态管理
目录 1.计算属性computed,一定要return值 (1)案例,输入框输入信息,自动算总价 2.watch侦听器 3.组件通信 (1)父传子 (2)子传父 (3)组件的双向绑定使用v-model ...
Vue3 之 Pinia - 状态管理
目录一.概念 1. Pinia => Pinia 2. Pinia和Vuex的对比 01 - 不是已经有Vuex了吗?为什么还要用Pinia 02 - 和Vuex相比,Pinia有很多的优势 ...
极简Vue3教程--Pinia状态管理
Pinia(发音为/piːnjʌ/,如英语中的"peenya")是最接近piña(西班牙语中的菠萝)的词:Pinia开始于大概2019年,最初是作为一个实验为Vue重新设计状态管理 ...
Vue3.0 状态管理库Pinia的前世今生
文章目录什么是 Pinia 呢? Pinia 和 Vuex 的区别在哪里? 与Vuex相比,Pinia所拥有的那些优势如何安装与使用Pinia 什么是 Pinia 呢? Pinia是Vue3版本的 ...
Vue3学习笔记：了解并使用Pinia状态管理
Vue3是一个流行的JavaScript框架,它允许您构建交互式的Web应用程序.Vue3中使用的状态管理工具是Vuex,但是有一种新的状态管理工具叫做Pinia,它提供了更简单.更轻量级的状态管理方 ...
快速入门 Pinia 状态管理库
Pinia 是一个用于 Vue 的状态治理库,相似 Vuex, 是 Vue 的另一种状态治理计划.如果你现在使用 vue3 开发项目,那么推荐你使用 Pinia 开发. Pinia的优点 1.完整的 ...

Vue3-pinia（状态管理）

pinia是什么？

官网

下载

使用

Vue3-pinia（状态管理）相关推荐

最新文章

热门文章