下一代Vuex(Pinia)不学你就out了
为什么说不学Pinia你就out了。
Pinia是下一代Vue状态管理库,在Vue-cli中已经替换了原来的Vuex,且同时支持Vue2.0和Vue3.0两个大版本。Pinia简化了状态管理,抛弃了Vuex中的mutation
,只有 state, getter
和 action
,且完美支持TypeScript
及Vue3.0的hooks
,可以很好的进行代码分割。
一、安装Pinia
初始化项目: npm init vite@latest
安装Pinia: npm i pinia
import { createApp } from 'vue'
import App from './App.vue'
// 导入构造函数
import { createPinia } from 'pinia'
// 创建Vue应用实例app
const app = createApp(App)
// 应用以插件形式挂载Pinia实例
app.use(createPinia())
app.mount('#app')
二、创建全局状态store
// stores/counter.ts
// 引入仓库定义函数
import { defineStore } from 'pinia'
// 传入2个参数,定义仓库并导出
// 第一个参数唯一不可重复,字符串类型,作为仓库ID以区分仓库
// 第二个参数,以对象形式配置仓库的state,getters,actions
export const useCounterStore = defineStore('counter', {// 存储全局状态state: () => {return { name: 'hello pinia', count: 0 }},// 用来封装计算属性,有缓存功能,类似于computedgetters: {getName(state) {return state.name + '...'}},// 处理业务逻辑,对state中的数据进行修改actions: {increment() {this.count++},subtract() {this.count--}}
})
三、基本示例
一旦仓库被实例化,就可以直接通过实例对象访问仓库上的state
、getters
和actions
中定义的任何属性。
<template><h1 style="color: blue">{{ store.getName }}</h1><h2>数值变化:{{ store.count }}</h2><button type="button" @click="store.increment">点击 + 1</button><button type="button" @click="store.subtract">点击 - 1</button>
</template><script setup lang="ts">
// 在需要使用状态的组件内需要先导入仓库:
import { useCounterStore } from '../stores/counter'
// 实例化仓库
const store = useCounterStore()
</script>
四、数据解构
Pinia中的store是一个用reactive包装的对象,不能直接通过ES6规范进行解构,因为这样做会使状态不具有响应性。
为了保持状态的响应行,应通过storeToRefs
API 对仓库实例结构以便获取状态。
<template><h1 style="color: blue">name属性示例:{{ name }}</h1><h1 style="color: green">getter属性示例:{{ store.getName }}</h1><h1>数值变化:{{ count }}</h1><button type="button" @click="store.increment">点击 + 1</button><button type="button" @click="store.subtract">点击 - 1</button>
</template><script setup lang="ts">
// 在需要使用状态的组件内需要先导入状态仓库:
import { storeToRefs } from 'pinia'
import { useCounterStore } from '../stores/counter'
// 实例化仓库函数
const store = useCounterStore()
const { name, count } = storeToRefs(store)
</script>
五、数据修改
Pinia中数据修改可以一次修改一个状态,也可以一次修改多个状态。
修改单个状态比较简单,不像Vuex每次需要调用Vuex的api,Pinia中,修改单个状态,可直接通过仓库函数的实例直接调用。
如以下示例中修改name值
// stores/name.ts
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {state: () => {return { name: 'hello pinia', count: 0 }},getters: {getName(state) {return state.name + '...'}},actions: {setName(val: string) {this.name = val},increment() {this.count++}}
})
<template><h1 style="color: blue">name属性示例:{{ store.name }}</h1><h1 style="color: green">getter属性示例:{{ store.getName }}</h1><button type="button" @click="store.setName('修改了name')">点击修改name</button>
</template>
<script setup lang="ts">
import { useCounterStore } from '../stores/counter'
const store = useCounterStore()
</script>
修改多条状态,Pinia中一次修改多条状态,需要通过官方提供的$patch
,$patch
方法可以接受的参数类型可以是一个函数也可以是一个对象对象。
<template><h1 style="color: blue">count:{{ store.count }}</h1><h1 style="color: green">name:{{ store.name }}</h1><button type="button" @click="changeState">点击修改store中的状态</button><button type="button" @click="changeState2">点击修改store中的状态</button>
</template>
<script setup lang="ts">
// 在需要使用状态的组件内需要先导入状态仓库:
import { useCounterStore } from '../stores/counter'
// 实例化仓库函数
const store = useCounterStore()
const changeState = () => {store.$patch({count: 2,name: '通过$patch的对象形式修改了名称'})
}
const changeState2 = () => {store.$patch(state => {state.count = 4state.name = '通过$patch的函数形式修改了名称'})
}
</script>
6、多仓库之间的调用
在 Pinia 中,可以在一个 store
中 import
另外一个 store
,然后通过调用引入 store 方法的形式,获取引入 store
的状态。
定义config
// stores/config.ts
import { defineStore } from 'pinia'
export const useConfigStore = defineStore('config', {state: () => {return {primaryColor: '#5468ff'}},getters: {},actions: {}
})
定义name
// stores/name.ts
import { defineStore } from 'pinia'
import { useConfigStore } from './config'
export const useCounterStore = defineStore('counter', {state: () => {return { name: 'hello pinia', count: 0 }},getters: {getName(state) {return state.name + '...'}, // 调用外部的storegetConfig() {const config = useConfigStore()return config.primaryColor}},actions: {setName(val: string) {this.name = val},increment() {this.count++}}
})
应用仓库数据
<template><h1 style="color: blue">count:{{ store.count }}</h1><h1 style="color: green">name:{{ store.name }}</h1><!-- 获取另外一个config中的配置 --><h1 style="color: green">name:{{ store.getConfig }}</h1>
</template>
<script setup lang="ts">
// 在需要使用状态的组件内需要先导入状态仓库:
import { useCounterStore } from '../stores/name'
// 实例化仓库函数
const store = useCounterStore()
</script>
Pinia个人感触最深的是对于TypeScript
的兼容,无论是在模板语法或者是逻辑处理中,都可以完美的提示仓库上的state
、getters
和actions
中定义的任何属性。
7、往期内容已全部收录在专栏中:
Flutter专栏_WEB前端李志杰的博客-CSDN博客
Vue专栏_WEB前端李志杰的博客-CSDN博客
下一代Vuex(Pinia)不学你就out了相关推荐
- pinia与vuex的区别以及pinia的使用
###pinia 与 vuex 的区别 pinia 的优点 : 完整的 TypeScript 支持:与在 Vuex 中添加 TypeScript 相比,添加 TypeScript 更容易 极其轻巧(体 ...
- pinia 的使用(一)—— 基本介绍
官网地址:https://pinia.vuejs.org/ 文章目录 1.Pinia 介绍 ① 核心特性 ② 核心概念 Ⅰ. state Ⅱ. getters Ⅲ. actions Ⅳ. **提示:P ...
- [pinia]报错信息:getActivePinia was called with no active Pinia. Did you forget to install pinia
在优化vue的过程中,看到目前为止官方推荐的数据管理工具是pinia,而我使用的是vuex pinia的迁移非常快捷方便 所以接下来简要说明一下迁移过程中遇到的问题 迁移问题 getActivePin ...
- vue3 + vite + ts + pinia + yarn
Vue3 + Vite + TypeScript + Pinia + Yarn yarn 常用命令 vite 构建工具 vite 创建项目 Vue 3 vue 3 组件库 vue 文档 组合式 API ...
- 新一代Vue脚手架(create-vue)
Vue2.X中创建一个项目,我们基本都会选择Vue官方提供的脚手架工具Vue-cli(也可以基于webpack手动搭建这都没问题),如果想了解Vue-cli创建项目的过程,可以查看Vue-cli创建V ...
- 七种Vue3传值方式
七种Vue3传值方式 props emit v-model refs provide/inject eventBus vuex/pinia(状态管理工具) Props方式 Props方式是Vue中最常 ...
- 金九银十,为期2周的前端面经汇总(初级前端)
HTML h5语义化标签以及作用 header :头部 nav:导航 article:内容 section:块级 aside:侧边栏 footer:尾部 好处: 1.去掉或者丢失样式的时候能够让页面呈 ...
- 前端基础知识点-每天一个基本知识点(100+个前端小知识,你是否都知道?)
文章目录 前言 第一回合 一.知识点:cookie(21/09/06) 二.知识点:节流和防抖(21/09/07) 三.知识点:var和let以及const(21/09/08) 四:知识点:深拷贝和浅 ...
- 注册【小程序】和注册页面
文章目录 注册小程序 App函数介绍 App函数作用 作用一: 判断打开场景 作用二: 定义全局数据 作用三: 生命周期函数 注册页面 Page函数中基本操作 Page页面的生命周期 注册小程序 Ap ...
最新文章
- Android(java)学习笔记96:layout_weight使用注意事项
- 北京中天荣泰视觉检测 仿真
- minifilter
- oracle 方言报错,ORACLE11g:No Dialect mapping for JDBC type: -9解决方案详解
- Java用map实现沁园春_QQ飞车:小钰挑战沁园春影子记录,成为了这张地图的赛道之王!...
- 各大型网站架构分析收集Z
- odps mapreduce学习笔记
- 使用色彩追踪和形态学运算得到图像中感兴趣区域
- 使用HTML实现用户登录界面
- 期权期货和金融衍生品学习笔记 -- 第一章引言
- 基于Java Web社区医院远程挂号
- kindle导入电子书方法
- R语言和Julia以及Python使用Feather包共享数据
- 重庆大学非全日制计算机专业,2018年重庆大学非全日制研究生招生专业目录
- 系统开发视角下的诊断 ———— 动力系统(P)诊断故障6
- 性能测试测试方案总结
- java学习---搭建文件管理服务器
- 吉首大学第八届“新星杯”大学生程序设计大赛 K: WaWa的难题(找规律)
- gobybus_bus的用法总结大全
- 汇川机器人视觉标定_汇川机器人应用技术课件.ppt
热门文章
- 15.windbg-dds、dps、dqs、PE文件解析
- 小程序反编译 g is not defined_【美剧笔记24】小谢尔顿 S2E1啦啦啦,我是卖报的小行家...
- 46. DDR2内存初始化代码分析-9
- Html.from()加载网络图片
- JQuery 基础笔记
- 第一篇 数据结构、设计模式与手写代码
- 我的机器学习项目(一):ML领域的 Hello World 任务--识别手写数字
- iOS图片不规则剪切
- 【学习笔记】前端开发调试工具与PS切图技巧
- 改写《python数据挖掘入门与实践》第九章Gutenberg书籍下载代码