Vue3中Vuex的基本使用

news2024/12/28 22:57:13

src/store/uuidState.js

const uuidState = {
  namespaced: true,
  state: {
    uuid: "",
    state_tag: "",
  },
  // 要想改变state中的数据必须使用mutations的方法
  mutations: {
    changeUuid(state, value) {
      state.uuid = value;
    },
    changeTag(state, value) {
      state.state_tag = value;
    },
  },
  // 异步的方法
  actions: {
    CHANGE_TAG(context, value) {
      setTimeout(() => {}, 2000);
      context.commit("changeTag", value);
    },
  },
  // 类似计算属性
  getters: {
    uuidToUpper(state) {
      return state.uuid.toUpperCase();
    },
  },
};

// export default uuidState;
export default { uuidState };

src/store/index.js

import { createStore } from "vuex";
import uuidState from "./uuidState";
export default createStore({
  state: {
    code: "this is a code",
  },
  getters: {
    CODE(state) {
      return state.code.toUpperCase();
    },
  },
  mutations: {},
  actions: {},
  modules: {
    // uuidState,
    uuidState: uuidState.uuidState,
  },
});

src/views/Vue3Vuex.vue

<template>
    <div>Vue3------Vuex复习</div>
    <div>使用模块中的state:{{ $store.state.uuidState.uuid }}</div>
    <div>使用模块中的getters:{{ $store.getters['uuidState/uuidToUpper'] }}</div>
    <div>使用非模块的state:{{ $store.state.code }}</div>
    <div>使用非模块的getters:{{ $store.getters.CODE }}</div>
</template>

<script setup>
import { nanoid } from 'nanoid'
import { useStore } from 'vuex';
const store = useStore()
// 使用mutations修改state中的的值
const saveuuid = () => {
    const uuid = nanoid()
    store.commit('uuidState/changeUuid', uuid)
}
// 获取state中的值
const getuuid = () => {
    return store.state.uuidState.uuid
}
// 使用actions异步修改state的值
const setStateTag = () => {
    store.dispatch('uuidState/CHANGE_TAG', '-----actions-----')
}
// 使用getters加工state的数据
const getUuidUpper = () => {
    return store.getters['uuidState/uuidToUpper']
}
// 初始化
const init = () => {
    saveuuid()
    setStateTag()
    // console.log('store', store);
    console.log('uuid', store.state.uuidState.uuid);
    console.log('state_tag', store.state.uuidState.state_tag);
    console.log('getter', store.getters['uuidState/uuidToUpper']);
}
init()
</script>

<style lang="scss" scoped>
</style>

结果展示:
在这里插入图片描述

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

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

相关文章

如何通过空号检测,验证电话号码数据的准确性

引言 空号检测 API 接口通常与电话号码数据库或相关的电话服务提供商进行交互&#xff0c;使用验证算法和查询技术来确定电话号码的状态。通过该接口&#xff0c;开发者可以通过编程方式对电话号码进行验证&#xff0c;帮助验证号码的有效性&#xff0c;确保数据的准确性和可靠…

HJ76 尼科彻斯定理

描述 验证尼科彻斯定理&#xff0c;即&#xff1a;任何一个整数m的立方都可以写成m个连续奇数之和。 例如&#xff1a; 1^31 2^335 3^37911 4^313151719 输入一个正整数m&#xff08;m≤100&#xff09;&#xff0c;将m的立方写成m个连续奇数之和的形式输出。 数…

vmware17安装群辉6.2懒人包

懒人包下载 链接&#xff1a;https://pan.baidu.com/s/1onGpM3BLIKUuxs10lLM83A?pwdcmdr 提取码&#xff1a;cmdr --来自百度网盘超级会员V5的分享 解压安装 如果已经安装了vmware软件的话&#xff0c;直接双击打开即可 上图说明安装成功 点击搜索 &#xff0c; 会出现服务…

0-1BFS 双端队列 广度优先搜索

一. BFS及0-1BFS的简单介绍 深度优先搜索DFS和广度优先搜索BFS是经常使用的搜索算法&#xff0c;在各类题目中都有广泛的应用。 深度优先搜索算法&#xff08;英语&#xff1a;Depth-First-Search&#xff0c;DFS&#xff09;是一种用于遍历或搜索树或图的算法。其过程简要来说…

pwn学习day3——函数调用约定

文章目录 x32 cdecl调用约定x64 System V AMD64 ABI调用约定 规定函数调用时如何传递参数&#xff0c;如何返回值&#xff0c;如何进行栈管理 x32 cdecl调用约定 参数从右往左依次压入栈中&#xff0c;返回值存入eax寄存器中,由调用者清理栈上的参数。 测试程序&#xff1a; …

转载-【AI思维空间】Chat2DB 一款开源数据库客户单工具

卸载 Navicat&#xff0c; xxx 又开源了一款数据库神器&#xff0c;太炸了 Chat2DB 是一款有开源免费的多数据库客户端工具&#xff0c;支持windows、mac本地安装&#xff0c;也支持服务器端部署&#xff0c;web网页访问。和传统的数据库客户端软件Navicat、DBeaver 相比Chat2D…

基于JSP+Servlet+Mysql的智能化停车场管理系统(含论文)

TOC 一、系统介绍 项目类型&#xff1a;Java web项目 项目名称&#xff1a;基于JSPServlet的智能智能停车场管理系统 源码作者&#xff1a;未知 项目架构&#xff1a;B/S架构 开发语言&#xff1a;Java语言 前端技术&#xff1a;HTML、CSS、JS等技术 后端技术&#xff…

中国国债发行数据集(2002-2023)

国债是由国家发行的债券&#xff0c;由于国债的发行主体是国家&#xff0c;所以它具有最高的信用度&#xff0c;被公认为是最安全的投资工具。国债按照交易市场的不同分为三类&#xff0c;即银行间市场国债、交易所市场国债和柜台市场国债&#xff1b;按照交易方式的不同分为三…

PCB绘制封装

绘制封装 常见的电阻封装如下&#xff1a; 绘制封装的一般步骤&#xff1a; 丝印不重要&#xff0c;关键是焊盘。 第一步是确认中心(对称中心)&#xff1b;第二步&#xff0c;围绕着对称中心&#xff0c;放置焊盘。直插式的焊盘要放大孔径&#xff0c;贴片式的焊盘要加长&am…

springboot-配置优先级

配置文件 类型 1.properties(三者同时存在&#xff0c;优先级最高) 2.yml 3.yaml&#xff08;最低&#xff09; 除此之外&#xff0c;可以在启动配置处修改 //java系统属性配置, -Dserver.port8080&#xff0c;优先级高于以上三种 //命令行参数 --server.port10010&#xff0…

【SQL应知应会】行列转换(一)• MySQL版

欢迎来到爱书不爱输的程序猿的博客, 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 本文收录于SQL应知应会专栏,本专栏主要用于记录对于数据库的一些学习&#xff0c;有基础也有进阶&#xff0c;有MySQL也有Oracle 行列转换 • Mysql版 一、MySQL行列转换1.准备操作…

kafka入门,数据去重(九)

数据传递语义 至少一次&#xff1a;ACK级别设置为-1分区副本大于等于2ISR里应答的最小副本数量大于等于2 最多一次&#xff1a;ACK级别设置为0 总结&#xff1a; At Least Once&#xff1a;可以保证数据不丢失&#xff0c;但是不能保证数据不重复 At Most Once&#xff1a;可以…

智慧园区运营管理平台解决方案

智慧园区运营管理平台是当今现代城市发展中的一项重要工具。随着城市人口不断增长&#xff0c;对城市基础设施和服务的需求也不断增加。为了有效管理和优化园区内的各项运营活动&#xff0c;智慧园区运营管理平台应运而生。 智慧园区运营管理平台是基于现代信息技术和互联网技术…

10W+前端面试题面试资料八股文

点击下方链接获取全部内容文档题目及其答案: 10W前端面试题&面试资料&八股文题目及其答案 https://m.tb.cn/h.5a7v237?tkQeVPdsoKwr4 CZ3457 部分题目如下&#xff1a; 1. call丶apply丶bind区别及源码实现&#xff08;手写&#xff09; 不同点&#xff1a; call…

HTML 编辑器的介绍及推荐

HTML 编辑器 HTML 编辑器是用于编写 HTML 的工具&#xff0c;使用 HTML 编辑器时以编辑主题&#xff0c;索引&#xff0c;自定义窗口&#xff0c;选择添加搜索页。 使用 Notepad 或 TextEdit 来编写 HTML 下列是三种专门用于编辑 HTML 的 HTML 编辑器&#xff1a; Adobe Dream…

ChatGPT实战:高考志愿填报

近期&#xff0c;随着各地陆续发布高考成绩&#xff0c;高考志愿填报市场随之升温&#xff0c;“高报师”再次成为“香饽饽”。填报志愿对中学生来说太难&#xff0c;在一个懵懂的年纪做这样一个决策&#xff0c;份量是比较重的。当普通人没很多的信息做参考的时候&#xff0c;…

【测试效率提升技巧】xmind测试用例转换为excel工具使用手册

【测试效率提升技巧】xmind测试用例转换为excel工具使用手册 一、前置环境配置二、执行Xmind2testcase的转换方法1.在控制台输入xmind2testcase [path/xmind文件路径] [-csv] [-xml] [-json]&#xff0c;例&#xff1a;xmind2testcase /root/homin/XX测试点.xmind -csv ##在当前…

HBase(14):HBase架构

1 系统架构 1.1 Client 客户端,例如:发出HBase操作的请求。例如:之前我们编写的Java API代码、以及HBase shell,都是CLient 1.2 Master Server 在HBase的Web UI中,可以查看到Master的位置。 监控RegionServer处理RegionServer故障转移处理元数据的变更处理region的分配或…

【Python 随练】学用 circle 函数画圆形。

题目&#xff1a; 画图&#xff0c;学用circle函数画圆形。 简介&#xff1a; 在本篇博客中&#xff0c;我们将介绍如何使用Python的绘图库来画圆形。我们将使用circle函数来绘制圆形&#xff0c;并提供一个完整的代码示例来演示其用法。 绘制圆形&#xff1a; 要绘制圆形…

使用Megascans,Blender和Substance 3D画家创建渔人旅馆(p1)

今天瑞云渲染小编给大家带来一篇Polina Tarakanova分享的Fishermans Inn项目背后的工作流程&#xff0c;展示了如何完成水分效果&#xff0c;并解释了照明的设置方式。 介绍 你好! 我叫Polina Tarakanova&#xff0c;今年30岁&#xff0c;是一名来自莫斯科的初级环境艺术家。从…