pinia 的使用方法

使用方式(选项式)

1、在 mian.js 导入 pinia 里的 createPinia 函数。

2、app.use 这个 createPinia 函数的返回值。

// main.jsimport { createPinia } from 'pinia';app.use(createPinia());

3、创建一个 js 文件(该文件保存着共享的数据,共享的方法),惯例上会叫该 js 文件为 store

4、在 store 文件里,从 pinia 里导入 defineStore 函数(该函数是定义 store 的函数)。

5、在 defineStore 函数的第二个参数定义共享的数据和方法。

6、用 export 导出 defineStore 函数的返回值,该返回值是一个函数,在这里我命名该函数为 useUserStore。

// userStore.jsimport { defineStore } from 'pinia';export const useUserStore = defineStore('user', {state: () => {return {name: '李小明',age: 18,hobby: 'basketball'}},getters: {// this 形式// doubleAge() {//     return this.age * 2// },doubleAge: (state) => {return state.age * 2}},actions: {changeAge() {this.age = 16},}});

7、在需要该 store 里的数据和方法的 vue 文件里导入该 useUserStore 函数。

8、在 vue 文件里使用 setup 函数,在 setup 函数里运行一次 useUserStore 函数,并把该 useUserStore 函数的返回值赋予给一个变量,该变量保存着上面 defineStore 函数定义的共享的数据和方法。

10、在 setup 函数里 return 该变量,该变量就会被 vue 实例代理(即 this)。

<template><div><p>姓名:{{ userStore.name }}</p><p>年龄:{{ userStore.age }}</p><p>爱好:{{ userStore.hobby }}</p><p>双倍年龄:{{ userStore.doubleAge }}</p><p>计算属性:{{ getName }}</p><div><button @click="userStore.changeAge">userStore 的 changeAge 方法,点击改变年龄</button></div><div style="margin: 10px 0;">app 的按钮<button @click="consoleName" style="margin-left: 5px;">点击我</button></div></div>
</template>
<script>import { useUserStore } from './store/userStore.js';export default {setup() {const userStore = useUserStore();return {userStore // 导出 userStore,userStore 会被 vue 实例代理,即 this。}},data() {return {}},methods: {consoleName() {console.log(this.userStore.name); // 通过 this 访问 userStore}},computed: {getName() {return this.userStore.name // 通过 this 访问 userStore}}}</script><style></style>

温馨提示: store 会保存在组件实例的 _pStores 属性里。

整体演示

userStore.js(全局状态文件)

import { defineStore } from 'pinia';export const useUserStore = defineStore('user', {// 箭头函数state: () => {return {name: '李小明',age: 18,hobby: 'basketball'}},// 普通函数// state() {//     return {//         name: '李小明',//         age: 18,//         hobby: 'basketball'//     }// },getters: {// this 形式// doubleAge() {//     return this.age * 2// },// 参数形式doubleAge: (state) => {return state.age * 2}},actions: {changeAge() {this.age = 16},}
});

App.vue

<template><div><p>姓名:{{ userStore.name }}</p><p>年龄:{{ userStore.age }}</p><p>爱好:{{ userStore.hobby }}</p><p>双倍年龄:{{ userStore.doubleAge }}</p><p>计算属性:{{ getName }}</p><div style="margin: 10px 0;"><button @click="userStore.changeAge">userStore 的 changeAge 方法,点击改变年龄</button></div><div style="margin: 10px 0;">app 的按钮<button @click="consoleName" style="margin-left: 5px;">点击我</button></div><div style="border: 1px solid skyblue;padding: 10px ;"><HelloWorld></HelloWorld></div></div>
</template>
<script>import { useUserStore } from './store/userStore.js';import HelloWorld from './components/HelloWorld.vue';export default {setup() {const userStore = useUserStore();return { userStore }},components: {HelloWorld},mounted() {},data() {return {}},methods: {consoleName() {console.log(this.userStore.name);}},computed: {getName() {return this.userStore.name}}
}</script><style></style>

子组件 HelloWorld.vue

<template><p>我是子组件</p><p>userStore.age 等于 {{ userStore.age }}</p><button @click="changeAge">我是子组件按钮</button>
</template><script>import { useUserStore } from '../store/userStore.js';export default {setup() {const userStore = useUserStore(); // 整体导出const changeAge = userStore.changeAge; // 单独导出一个方法return {userStore,changeAge}},data() {return {}},methods: {}
}
</script><style></style>

State

state 的值是一个函数。

state 相当于 data,是我们需要在组件之间共享的数据。

普通方法

state() {return {name: '李小明',age: 18,hobby: 'basketball'}
},

箭头函数

state: () => {return {name: '李小明',age: 18,hobby: 'basketball'}
},

在 TypeScript 中使用箭头函数将自动推断这些属性的类型。

Getters

getters 的值是一个对象。

getter 相当于计算属性,计算的结果会被缓存下来,只有当依赖的值发生改变才会重新计算。

使用第一个参数 state 可以访问 state 

getters: {doubleAge(state) {return state.age * 2},
}

也可以在普通函数里使用 this,从而访问到整个 pinia 实例(所以可以在 getter 里访问另外的 getter),

getters: {doubleAge() {return this.age * 2  // this(pinia 实例) 代理了 state 里的属性},
}

但是在箭头函数里,因为箭头函数里 this 的指向问题,所以箭头函数只能使用第一个参数 state 来访问 state,

getters: {doubleAge: (state) => {return state.age * 2}
}

Actions

actions 的值是一个对象。

action 相当于方法。

普通函数可以通过 this 访问 pinia 实例

actions: {changeAge() {this.age = 16},
}

因为箭头函数的 this 的问题,Action 里使用箭头函数访问 pinia 实例是不行的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/637727.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Git和SVN

1、Git Git是一个分布式版本控制系统&#xff0c;由Linus Torvalds创建&#xff0c;用于有效、高速地处理从小到大的项目版本管理。Git是开源的&#xff0c;采取了分布式的版本库的方式&#xff0c;不需要服务器端软件就可以运行。 Git的核心概念 以下是Git中的一些核心概念…

《Python数据分析技术栈》第03章 02 数据结构(Structure of data)

02 数据结构&#xff08;Structure of data&#xff09; 《Python数据分析技术栈》第03章 02 数据结构&#xff08;Structure of data&#xff09; The data that we need to analyze could have any of the following structures, 我们需要分析的数据可能具有以下任何一种结…

RabbitMQ-数据持久化

一、持久化类型 1、交换机持久化&#xff08;SpringAMQP默认&#xff09; 2、队列持久化&#xff08;SpringAMQP默认&#xff09; 3、消息持久化 二、消息持久化 1、纯内存操作 如果采用纯内存操作&#xff0c;那么消息存储达到队列的上限之后&#xff0c;会有一个page ou…

开源进程/任务管理服务Meproc使用之HTTP API

本文讲述如何使用开源进程/任务管理服务Meproc的HTTP API管理整个服务。 Meproc所提供的全部 API 的 URL 都是相同的。 http://ip:port/proc例如 http://127.0.0.1:8606/proc在下面的小节中&#xff0c;我们使用curl命令向您展示 API 的方法、参数和请求正文。 启动任务 …

git 常规操作及设置

git 常规操作及设置 Git是一个分布式版本控制系统&#xff0c;可以用来跟踪文件的修改历史并与其他人进行协作开发。下面是一些常见的Git操作及设置&#xff1a; 初始化仓库&#xff1a;使用命令git init在当前目录创建一个新的Git仓库。 克隆仓库&#xff1a;使用命令git clo…

TCP/IP协议及配置、IP地址、子网掩码、网关地址、DNS与DHCP介绍

一、什么是服务器 能够为其他计算机提供服务的更高级的电脑 尺寸:Unit 1u1.75英寸44.45mm4.445cm IDC&#xff08;机房&#xff09; C/S结构 Client/Server客户端和服务端 二、TCP/IP协议 计算机与计算机之间通信的协议 三要素&#xff1a; IP地址 子网掩码 IP路由 I…

基于一次应用卡死问题所做的前端性能评估与优化尝试

问题背景 在上个月&#xff0c;由于客户反馈客户端卡死现象但我们远程却难以复现此现象&#xff0c;于是我们组织了一次现场上门故障排查&#xff0c;并希望基于此次观察与优化&#xff0c;为客户端开发提供一些整体的优化升级。当然&#xff0c;在尝试过程中&#xff0c;也发…

大模型实战营Day6 作业

基础作业 使用 OpenCompass 评测 InternLM2-Chat-7B 模型在 C-Eval 数据集上的性能 环境配置 conda create --name opencompass --clone/root/share/conda_envs/internlm-base source activate opencompass git clone https://github.com/open-compass/opencompass cd openco…

eMMC之分区管理、总线协议和工作模式

一、eMMC 简介 eMMC 是 embedded MultiMediaCard 的简称。MultiMediaCard&#xff0c;即MMC&#xff0c; 是一种闪存卡&#xff08;Flash Memory Card&#xff09;标准&#xff0c;它定义了 MMC 的架构以及访问 Flash Memory 的接口和协议。而eMMC 则是对 MMC 的一个拓展&…

android 13.0 Camera2 去掉后置摄像头 仅支持前置摄像头功能

1.概述 在定制化13.0系统rom定制化开发中,当产品只有一个前置摄像头单摄像头,这时调用相机时就需要默认打开前置摄像头就需要来看调用摄像头这块的代码,屏蔽掉后置摄像头的调用api就可以了,接下来就来具体实现相关功能的开发 2.Camera2 去掉后置摄像头 仅支持前置摄像头功…

【Docker】使用Docker安装Nginx及部署前后端分离项目应用

一、Nginx介绍 Nginx是一个高性能的HTTP和反向代理web服务器&#xff0c;同时也提供了IMAP/POP3/SMTP服务。它是由伊戈尔赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的&#xff0c;公开版本1.19.6发布于2020年12月15日。其将源代码以类BSD许可证的形式发布&#xff0c;因它…

数据结构---栈(Stack)

一、基本概念 栈是一种线性数据结构 二、特点 栈是"后进先出(LIFO---Last In First Out)"的数据结构(盘子的叠放&#xff1a;当服务员将新的盘子放在餐桌上时&#xff0c;他们通常会将盘子放在已有的盘子堆的顶部。当顾客用完盘子后&#xff0c;服务员会从堆顶取走…

PostgreSQL 100条命令

我会为您提供一些 PostgreSQL 中最常用的命令&#xff1a; 1. 创建数据库&#xff1a;CREATE DATABASE database_name; 2. 连接到数据库&#xff1a;\c database_name; 3. 创建表格&#xff1a;CREATE TABLE table_name (column1 datatype, column2 datatype, ...); 4. 插入数…

内网环境横向移动——利用windows服务

利用windows服务进行横向渗透主要是通过sc命令&#xff0c;但是注意这里跟之前windows远程命令相比多了一个条件&#xff0c;即当前主机需要为administrator权限。 sc命令 sc命令是XP系统中功能强大的DOS命令,SC命令能与“服务控制器”和已安装设备进行通讯。SC是用于与服务控…

SDCMS靶场通过

考察核心&#xff1a;MIME类型检测文件内容敏感语句检测 这个挺搞的&#xff0c;一开始一直以为检查文件后缀名的&#xff0c;每次上传都失败&#xff0c;上传的多了才发现某些后缀名改成php也可通过&#xff0c;png图片文件只把后缀名改成php也可以通过&#xff0c;之前不成功…

uniapp组件库Popup 弹出层 的使用方法

目录 #平台差异说明 #基本使用 #设置弹出层的方向 #设置弹出层的圆角 #控制弹窗的宽度 | 高度 #内容局部滚动 #API #Props #Event 弹出层容器&#xff0c;用于展示弹窗、信息提示等内容&#xff0c;支持上、下、左、右和中部弹出。组件只提供容器&#xff0c;内部内容…

CSS:backdrop-filter实现毛玻璃的效果

实现效果 实现代码 /* 关键属性 */ background-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);完整代码 <style>/* 遮罩层 */.mo-mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height…

【排序算法】五、冒泡排序(C/C++)

「前言」文章内容是排序算法之冒泡排序的讲解。&#xff08;所有文章已经分类好&#xff0c;放心食用&#xff09; 「归属专栏」排序算法 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 冒泡排序1.1 原理1.2 代码实现&#xff08;C/C&#xff09;1.3 特性总结 冒泡排序 1.1…

WorkPlus AI助理私有化部署,助力企业降本增效

在当今数字化时代&#xff0c;提供卓越的客户服务成为了企业成功的重要因素。而AI智能客服技术的兴起&#xff0c;则成为了实现高效、快捷客户服务的利器。作为一款领先的AI助理解决方案&#xff0c;WorkPlus AI助理能够私有化部署&#xff0c;为企业打造私有知识库&#xff0c…

WorkPlus Meet私有化视频会议软件-构建安全高效的内网会议体验

在企业内部&#xff0c;高效的会议协作是推动团队协同和工作效率的关键。而内网会议系统成为了构建安全高效的内部会议体验的必要工具。作为一家领先的内网会议系统&#xff0c;WorkPlus Meet以其卓越的性能和智能化的功能&#xff0c;助力企业实现高效安全的内部会议体验。 为…