首页 > 其他分享 >【vue3】学习对store中数据的使用

【vue3】学习对store中数据的使用

时间:2024-03-08 22:55:24浏览次数:20  
标签:nodeList res 学习 nav vue3 import store

src/store/modules/nav.js

import {defineStore} from 'pinia';
import {handleTree} from '@/utils/ruoyi'
import {list} from "@/api/nav/node";

const store = defineStore(
	'nav',
	{
		state: () => ({
			nodeList: []
		}),
		actions: {
			GetTree() {
				return new Promise((resolve, reject) => {
					list().then(res => {
						this.nodeList = handleTree(res.data, 'id');
						resolve()
					}).catch(error => {
						reject(error)
					})
				})
			},
		}
	})

export default store

  xx.vue:使用

 经过computed处理过后的nodeList才是响应式数据,而且会监视着store中nodeList的变化的

 

标签:nodeList,res,学习,nav,vue3,import,store
From: https://www.cnblogs.com/joeblackzqq/p/18062037

相关文章

  • MYSQL学习笔记6: DQL条件查询(where)
    DQL条件查询(where)查询为空isnull#使用'is'而不是'='select*fromworkerswhereidCardisnull;查询非空isnotnullselect*fromworkerswhereidCardisnotnull;!=的其他表示方法<>select*fromworkerswhereage<>90;查询数据范围#格式select......
  • Mysql 学习记录 #01
    Mysql学习记录#01表的基本操作--创建表CREATETABLEIFNOTEXISTS`student`( `id`INT(4)NOTNULLAUTO_INCREMENTCOMMENT'编号', `name`VARCHAR(30)NOTNULLDEFAULT'匿名'COMMENT'姓名', `pwd`VARCHAR(20)NOTNULLDEFAULT'123456�......
  • 基于苍穹外卖写的springboot学习笔记,私聊拿源码
    一.关于md5加密的了解与使用1.分析MD5加密是一种不可逆的加密算法。也就是说我们只能正向加密,无法反向解密。于是乎,当我们用它作为密码加密方式时,我们只能加密码从数据库拿来与前端传来的数据加密后进行比较。2.使用方法他是由springboot框架提供二.关于swagge......
  • FFMPEG视音频编解码零基础学习方法
    背景知识FFmpeg是一个强大的开源软件项目,包含一套大量的库和程序,用于处理多媒体数据。它可以编码、解码、流式传输、过滤和播放几乎任何人类和及其创建的音频和视频。使用FFMPEG作为内核视频播放器Mplayer、ffplay射手播放器暴风影音KMPlayerQQ影音使用FFMPEG作为......
  • C语言0基础入门游戏辅助开发—学习笔记02
    C语言0基础入门游戏辅助开发—学习笔记02PS:这里仅作为本人学习过程中的随笔。数据类型、sizeof运算符数据类型数据类型是在关键字内的,或者说关键字包含数据类型。数据类型有哪些程序中的代码和数据都是以二进制的形式存储的,对计算机系统和硬件而言,数据类型的概念不存在,这......
  • Vue3 组合函数拖拽
    代码exportfunctionuseDragMouse(dom,container){letcontainerX=0;letcontainerY=0;letstartX=0;letstartY=0;functiondragPage(e){container.value.style.left=e.pageX-startX+containerX+"px";container.valu......
  • 用Vue3.0 写过组件吗?如果想实现一个 Modal你会怎么设计?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一、组件设计组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式现在有一个场景,点击新增与编辑都弹框出来进行填写,功能上大同小异,可能只是标题内容或者是显示的主体内容稍微不同这时候......
  • 双体技术学习选择结构
    选择结构ifif-else-elseswitchif···javapublicclasssda{publicstaticvoidmain(String[]args){intx=1;inty;if(x>0){y=x;}else{y=-x;}System.out.println(y);}}if-else-else···javapublicclasssda......
  • 双体学习第一周技术总结
    一、JDK,JRE,JVM的区别图例:JDK:java程序开发工具,包含JRE和开发工具。JRE:是java运行时的环境,包含JVM的核心类库。(运行环境)JVM:虚拟机。二、java是解释执行的高级编程语言保证,先编译后解释。三、java语法规则(1)代码区分大小写Scannersanner=newScanner(System.......
  • Java学习笔记——第九天
    综合项目:ATM项目需求拥有登陆界面,在登陆界面有开户、功能和退出系统功能。在开户时,要求输入姓名、性别、密码和每次取款限额,输入密码时要再输入一次以确认密码输入正确,之后自动生成不重复的8位数字卡号。在登陆时,若系统中没有账户,要能提示用户先去开户;若输入的账户不存在或密......