详解Vue3-pinia状态管理
目录
- pinia是什么？
- 官网
- 安装命令
- 使用
pinia是什么？
这个是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，尤大推荐。因为其logo像是一个菠萝，所以我们还称呼它为大菠萝。
这个是 vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，尤大推荐。因为其logo像是一个菠萝，所以我们还称呼它为大菠萝。
官网
安装命令
npm i pinia
使用
1、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')
2、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--
}
}
})
3、页面中使用 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状态管理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
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中vuex与pinia的踩坑笔记记录
目录 介绍 安装使用 简单对比写法差异与共同点 Vuex 和 Pinia 的优缺点 何时使用Pinia,何时使用Vuex 总结 介绍 Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎.它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库. Pinia的成功可以归功于其管理存储数据的独特功能(可扩展性.存储模块组织.状态变化分组.多存储创建等). 另一方面,Vuex也是为Vue框架建立的一个流行的状态管理库,它也是Vue核心团队推荐的状态管理库.Vuex高度关注应
-
vue3+Pinia+TypeScript 实现封装轮播图组件
目录 为什么封装? 静态结构 后面再进行更改 请求数据都存放在pinia里面 类型检测 页面级组件 全局组件 为什么封装? 迎合es6模块化开发思想 注册为全局组件,可以更好地复用,需要用到的地方,直接使用标签即可 静态结构 后面再进行更改 <script lang="ts" setup name="XtxCarousel"> defineProps() </script> <template> <div class=&qu
-
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 在生态系统中能够承担相同的
-
vite创建一个标准vue3+ts+pinia项目
目录 [01]使用的 Yarn创建项目: [02]在项目中使用pinia [03]添加vue-router [04] 安装按需自动导入插件 [05] 添加element-plus组件库 [06]添加sass [07] 安裝prettier 和 eslint 1.安装依赖项 使用vite创建一个标准vue3+ts+pinia项目的实现示例 [01]使用的 Yarn创建项目: 1.执行命令 yarn create vite my-vue-app --template vue-ts 3.cd my-v
-
vue3-pinia-ts项目中的使用示例详解
store.ts import { defineStore } from "pinia"; import { GlobalState, ThemeConfigProp } from "./interface"; import { createPinia } from "pinia"; import piniaPersistConfig from "@/config/piniaPersist"; import piniaPlu
-
一文详解Electron 电源状态管理
目录 Electron 电源相关模块 其中 powerMonitor 模块提供的接口 powerSaveBlocker 模块提供的方法 空闲状态监控 电源状态监控 锁屏和解锁 休眠和唤醒 系统行为阻断 Electron 电源相关模块 在 Electron 中有两个模块是跟电源相关的: powerMonitor:用于获取电源相关信息,监听电源相关事件 powerSaveBlocker:用于阻止系统进入睡眠状态 其中 powerMonitor 模块提供的接口 powerSaveBlocker 模块提
-
详解Vue中状态管理Vuex
vuex是一个专门为vue.js设计的状态管理模式,并且也可以使用devtools进行调试. 在vuex出现之前,vue里面的状态是属于'单向数据流'.举个官网的例子: new Vue({ // state data () { return { count: 0 } }, // view template: `<div>{{ count }} </div`, // actions methods: { increment () { this.count++ } } }) 其中 state
-
详解HTTP Cookie状态管理机制
HTTP cookies,通常又称作"cookies",已经存在了很长时间,但是仍旧没有被予以充分的理解.首要的问题是存在了诸多误区,认为cookies是后门程序或病毒,或压根不知道它是如何工作的.第二个问题是对于cookies缺少一个一致性的接口.尽管存在着这些问题,cookies仍旧在web开发中起着如此重要的作用,以至于如果cookie在没有可替代品出现的情况下消失,我们许多喜欢的Web应用将变得毫无用处. 一.cookie 起源 cookie 最早是网景公司的雇员 Lou Mo
-
Vue3新状态管理工具实例详解
目录 前言 安装 创建Store State 定义State 获取state 修改state Getters Actions 异步action action间相互调用 数据持久化 安装 使用 自定义key 持久化部分state 最后 前言 Pinia.js 是新一代的状态管理器,由 Vue.js团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x,在 Vue3.0 的项目中使用也是备受推崇. Pinia.js 有如下特点: 完整的 typescript 的支持: 足够轻量,压
-
详解Vue3的七种组件通信方式
目录 写在前面 举一个栗子 Props方式 emit方式 v-model方式 refs方式 provide/inject方式 事件总线 状态管理工具 写在前面 本篇文章是全部采用的<script setup>这种组合式API写法,相对于选项式来说,组合式API这种写法更加自由,具体可以参考Vue文档对两种方式的描述. 本篇文章将介绍如下七种组件通信方式: props emit v-model refs provide/inject eventBus vuex/pinia(状态管理工具) 开始搞
-
详解Vue3 Teleport 的实践及原理
Vue3 的组合式 API 以及基于 Proxy 响应式原理已经有很多文章介绍过了,除了这些比较亮眼的更新,Vue3 还新增了一个内置组件: Teleport.这个组件的作用主要用来将模板内的 DOM 元素移动到其他位置. 使用场景 业务开发的过程中,我们经常会封装一些常用的组件,例如 Modal 组件.相信大家在使用 Modal 组件的过程中,经常会遇到一个问题,那就是 Modal 的定位问题. 话不多说,我们先写一个简单的 Modal 组件. <!-- Modal.vue --> <
-
详解vue3中渲染函数的非兼容变更
目录 渲染函数API变更 Render函数参数 渲染函数签名更改 VNode Props 格式化 slot统一 移除$listeners $attrs现在包括class和style 渲染函数API变更 此更改不会影响到<template>用户 h现在全局导入,而非作为参数传递给渲染函数 渲染函数参数更改为在有状态组件和函数组件之间更加一致 vnode现在又一个扁平的prop结构 Render函数参数 // 2.0 渲染函数 export default { render(h) { return
-
详解Vue3如何加载动态菜单
目录 1. 整体思路 2. 实现细节 2.1 加载细节 2.2 getInfo 2.3 generateRoutes 1. 整体思路 首先我们来梳理下整体上的实现思路,首先一点:整体思路和 vhr 一模一样. 考虑到有的小伙伴可能已经忘记 vhr 中前端动态菜单的实现思路了,因此本文再和大家分析一下. 为了确保在所有的 .vue 文件中都能访问到到菜单数据,所以选择将菜单数据存入 vuex 中,vuex 是 vue 中一个存储数据的公共地方,所有的 .vue 文件都可以从 vuex 中读取到数据
-
详解Vue3 中的计算属性及侦听器
目录 计算属性 缓存 getter 和 setter 侦听器 配置选项 其它写法 计算属性 我们知道,在模板中可以直接通过插值语法显示一些data中的数据,但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示 在模板中使用表达式,可以非常方便的实现,但是设计它们的初衷是用于简单的运算,在模板中放入太多的逻辑会让模板过重和难以维护,并且如果多个地方都使用到,那么会有大量重复的代码 所以我们希望将业务逻辑和UI界面进行分离,其中一种方式就是将逻辑抽取到一个met
-
详解Vue3中对VDOM的改进
前言 vue-next 对virtual dom的patch更新做了一系列的优化,从编译时加入了 block 以减少 vdom 之间的对比次数,另外还有 hoisted 的操作减少了内存的开销.本文写给自己看,做个知识点记录,如有错误,还请不吝赐教. VDOM VDOM的概念简单来说就是用js对象来模拟真实DOM树.由于MV**的架构,真实DOM树应该随着数据(Vue2.x中的data)的改变而发生改变,这些改变可能是以下几个方面: v-if v-for 动态的props(如:class,@cl