《Vue3 基础知识》Pinia 01 之 基础

2024-06-15 05:36
文章标签 javascript 基础 vue vue3 01 frontend 基础知识 pinia

本文主要是介绍《Vue3 基础知识》Pinia 01 之 基础，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Pinia 基础知识

前言

说明

  • 本篇更倾向于 选项式 API 写法，因为项目是从 Vue2 升级至 Vue3，为更好且快速适配；
  • Vue2 中，Vuex3 与 Pinia 不能一起使用。因为 Pinia 使用的是 Vuex3 现有接口；
  • Vue3 中，Vuex4 与 Pinia 可以一起使用；

与 Vuex 的差异

  • 参考 从 Vuex ≤4 迁移；
  • Pinia 废弃 mutation；

Store/Pinia 是什么

  • 承载着全局状态；
  • 一个保存状态和业务逻辑的实体，它并不与你的组件树绑定；
  • 可理解为一个永远存在的组件，每个组件都可以读取和写入它；
  • 三个概念：state, getter, action ，可理解为组件中的 data, computed, methods；
  • store 是一个用 reactive 包装的对象，不用在 getter 后面写 .value；
  • store 不能解构，否则失去响应性。使用 storeToRefs() 解构可保持响应性；
<script setup>
import { storeToRefs } from 'pinia'const store useCounterStore()const { name, doubleCount } = storeToRefs(store)
</script>

核心概念

定义 Store

  • 使用 defineStore 定义，变量名建议以 use 开头且以 Store 结尾，例如：useUserStore；
  • 第一个参数要求 独一无二 ，且必传。它用来连接 store 和 devtools；
  • 第二个参数可接受两种类值：Setup 函数或 Option 对象。具体参考此处；
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {// ...
})

State

  • state 是 store 的核心；
  • state 被定义为一个返回初始化状态的函数。使得其可同步支持服务端和客户端(不理解…)；
  • 为了完整类型推理，推荐使用箭头函数；
// 选项式API方式
import { defineStore } from 'pinia'const userUserStore = defineStore('user', {// 使用箭头函数state: ()=> {return {name: 'admin',age: 30,}}
})

使用

通过实例访问，直接读写；

const store = userUserStore();store.name

重置 state

选项式 API 直接调 $reset() 方法。组合式API 要自己创建，参考此处。

const store = userUserStore();store.$reset()

只读的计算属性

使用 mapState() 辅助函数将 state 映射为只读的计算属性。

import { mapState } from 'pinia'
import { useUserStore } from '../stores/user'export default {computed: {// 直接用 this.name，与 store.name 数据相同...mapState(useUserStore, ['name']),...mapState(useUserStore, {// 与上述相同，但注册为 this.myNamemyName: 'name',// 也可以用函数fullName: store => store.name + 'Liu',// 可以访问 this，但没标注类型UserString(store) {return store.age + this.fullName}})}
}

可修改的计算属性

使用 mapWritableState() 辅助函数，但不能像 mapState() 传递成一个函数

import { mapWritableState } from 'pinia'
import { useUserStore } from '../stores/user'export default {computed: {// 直接用 this.name，与 store.name 数据相同。且能改变 this.name = '123'...mapWritableState(useUserStore, ['name']),...mapWritableState(useUserStore, {// 与上述相同，但注册为 this.myName。但没有函数方式myName: 'name',})}}

变更 state

  • 使用 $patch ，两种方式：对象方式和函数方式；
  • 区别是 p a t c h ( ) 允许你将多个变更归入 d e v t o o l s 的同一个条目中。同时请注意，直接修改 s t a t e ， patch() 允许你将多个变更归入 devtools 的同一个条目中。同时请注意，直接修改 state， patch()允许你将多个变更归入devtools的同一个条目中。同时请注意，直接修改state，patch() 也会出现在 devtools 中，而且可以进行 time travel (在 Vue 3 中还没有)。不理解…
// 方式一：对象方式
store.$patch({count: store.count + 1,age: 120,name: 'DIO',
})// 方式二：函数方式
store.$patch((state) => {state.items.push({ name: 'shoes', quantity: 1 })state.hasChanged = true
})

替换 state

// 这实际上并没有替换`$state`
store.$state = { count: 24 }
// 在它内部调用 `$patch()`：
store.$patch({ count: 24 })

Getter

  • 完全等同于 store 的 state 计算值，使用 getters 属性来定义；
  • 推荐使用箭头函数，并将接收 state 作为第一个参数；
  • 通过 this 访问 store 实例或其它 getter 值；
// 定义
export const useCounterStore = defineStore('counter', {state:() {return {count: 0,}},getters: {// 通过第一个参数 state 访问 countdoubleCount(state) {return state.count * 2},// 通过 this 访问其它 getter 值doublePlusOne() {return this.doubleCount + 1}}
})
// 访问
<script setup>
import { useCounterStore } from './counterStore'const store = useCounterStore()
</script>
<template><p>Double count is {{ store.doubleCount }}</p>
</template>
  • 向 getter 传递参数，getter 是幕后的计算属性，所以不可以向它们传递任务参数。但可以返回一个函数，函数可接受任意参数；
export const useUserListStore = defineStore('userList', {getters: {getUserById(state) {return (useId) => state.userd.find((user) => user.id === userId)}}
})
  • 想要使用另一个 store 的 getter，直接在 getter 内使用即可；
import { useOtherStore } from './other-store'export const useStore = defineStore('main', {state:() => {//...},getters: {otherGetter(state) {const otherStore = useOtherStore()return state.localData + otherStore.data}}
})
  • setup 中使用，直接访问就行，与 state 属性完全一样；
<script setup>
const store = useCounterStore()
store.count = 3
store.doubleCount // 6
</script>
  • 使用 mapState() 函数将其映射为 getters，与 state 用法一致；

Action

  • 相对于组件中的 method，可通过 defineStore() 中的 actions 属性定义；
  • 它们也是定义业务逻辑的完美选择；
  • 类似 getter，action 也可通过 this 访问整个 store 实例；
  • 不同之处，action 可以是异步的，可使用 async 或 Promise；
import { mande } from 'mande'const api = mande('/api/users')export const useUsers = defineStore('users', {state: () => {return {userData: null,}},actions: {async registerUser(login, password) {try {this.userData = await api.post({login, password})} catch(error) {showTooltip(error)}}}
})

调用：可以像函数或通常意义上的方法一样被调用；

<script setup>
const store = useCounterStore();
// 将 action 作为 store 的方法进行调用
store.randomizeCounter()
</script>
<template><!-- 即使在模板中也可以 --><button @click="store.randomizeCounter()"></button>
</template>

  • 访问其它 store 的 action，直接在 action 中调就好了；

  • 选项式API的用法

import { defineStore } from 'pinia'const userCounterStore = defineStore('counter', {state: () => {count: 0},actions: {increment() {this.count++;}}
})
  • 使用 setup()；
  • 不使用 setup()：mapActions 辅助函数将action属性映射为你组件中的方法；

组件外的 Store

单页面应用
  • app.use(pinia) 安装后，对 useStore() 的调用才能正常使用；
  • 为确保 pinia 实例被激活，最简单的方法是将 useStore() 调用放在 pinia 安装之后再执行的函数中；
import { useUserStore } from '@/stores/user'
import { createApp } from 'vue'
import App from './App.vue'// 错误
const userStore = useUserStore()const pinia = createPinia()
const app = createApp(App)
app.use(pinia)// 正确，因为 pinia 实例现在被激活
const userStore = useUserStore()

这篇关于《Vue3 基础知识》Pinia 01 之 基础的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1062562。

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

《0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeekR1模型的操作流程》DeepSeekR1模型凭借其强大的自然语言处理能力,在未来具有广阔的应用前景,有望在多个领域发... 目录0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型，3步搞定一个应
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
css实现图片旋转功能

css实现图片旋转功能

《css实现图片旋转功能》：本文主要介绍了四种CSS变换效果：图片旋转90度、水平翻转、垂直翻转，并附带了相应的代码示例，详细内容请阅读本文，希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo
阅读更多...
vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...
Vue项目中Element UI组件未注册的问题原因及解决方法

Vue项目中Element UI组件未注册的问题原因及解决方法

《Vue项目中ElementUI组件未注册的问题原因及解决方法》在Vue项目中使用ElementUI组件库时,开发者可能会遇到一些常见问题,例如组件未正确注册导致的警告或错误,本文将详细探讨这些问题... 目录引言一、问题背景1.1 错误信息分析1.2 问题原因二、解决方法2.1 全局引入 Element
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2