Vue3_Vuex

news2024/11/23 4:39:20

目录

一、安装

二、创建实例

三、main.js引入

四、组件内使用

1.查询vuex里面的数据值

 2.更改vuex里面的数据值

3.调用vuex里Actions的异步请求方法


Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex可以用来存储数据,组件传参等。

vuex官方文档icon-default.png?t=N7T8https://vuex.vuejs.org/zh/

一、安装

npm install vuex@next --save

二、创建实例

首先在src文件夹下创建一个文件夹名为store

store文件夹下创建两个文件分别是index.js(必须这个名字)  和  data.js(可以自行命名)

index.js:

import { createStore } from 'vuex'
import data from "./data";

export default createStore({
  modules: {
    data,
  }
})

data.js;

//请求用户信息接口
import { reqUser } from "@/api";

const state = {
    //你想存储的数据名称
    getUser: [],
};
const mutations = {
    GETUSER(state, getUser) {
        state.getUser = getUser;
    },
};
const actions = {
    async getUser({ commit }) {
        let result = await reqUser();
        if (result != undefined) {
            if (result.error_code == 0) {
                //请求成功
            } else {
                //请求失败
            }
        }
    },
};

const getters = {};
export default {
    state,
    mutations,
    actions,
    getters,
};

vuex核心概念主要有五部分:

① State

Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。

② Getter

有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数。

③ Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数。

④ Action

Action 类似于 mutation,不同在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。

⑤ Module

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

三、main.js引入

在mian.js里面引入并挂载:

import { createApp } from 'vue'
import App from './App.vue'

//引入
import store from "@/store";

const app = createApp(App);
app.config.errorHandler = (err) => {
    console.log(err);
};
// 屏蔽警告信息
app.config.warnHandler = (message) => {
    console.log(message);
};

//将store挂载到app上
app.use(store).mount('#app')

四、组件内使用

1.查询vuex里面的数据值

新建一个test.vue:

<template>

<!--dom元素内使用,显示出user内容-->
<div>{{user}}</div>
 
</template>

<script setup>
import { computed, reactive, toRefs } from "vue";
import { useStore } from "vuex";
const store = useStore();

const state = reactive({
  //得到我们在data.js里面定义的数据getUser的当前数值
  user: computed(() => store.state.user.getUser),
});
const { user } = toRefs(state);

//控制台输出
console.log(state.user)

</script>

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

 2.更改vuex里面的数据值

<script setup>
import { useStore } from "vuex";
const store = useStore();

//GETUSER,是mutations里面你自定义的函数名字
store.commit("GETUSER",'你的新值')

</script>

3.调用vuex里Actions的异步请求方法

<script setup>
import { useStore } from "vuex";
const store = useStore();

//getUser,是actions里面你自定义的异步函数名字
store.dispatch("getUser", '你的参数');

</script>

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

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

相关文章

虚拟机Ubuntu扩展磁盘大小

虚拟机Ubuntu扩展磁盘大小 1. 选择硬盘,并点击扩展,如果扩展选项是灰色的,请考虑是否开机或者留有快照 2. 虚拟机Ubuntu扩展磁盘大小 ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/2aea6670d42940f68d0f53c87810ac2b.png 3. 完成后开机,此时,我们的系统是还没…

DevOps后时代,构建基于价值流的平台化工程

本文来自腾讯蓝鲸智云社区用户: CanWay 平台化工程涉及双重核心意义。一方面&#xff0c;是类似利用IDE等工具提高工程师效率的平台化工程&#xff0c;如GitOps或命令行调度般便捷。然而&#xff0c;本文重点探讨的是基于价值流的平台化工程&#xff0c;尤其针对传统金融行业&a…

ClickHouse如何整合数据源:MySQL、HDFS...

一、ClickHouse数据源 ClickHouse 作为一个强大的列式数据库管理系统&#xff0c;支持多种数据源&#xff0c;使得用户能够方便地将数据导入 ClickHouse 进行存储和分析。以下是常见的 ClickHouse 数据源&#xff1a; 外部数据源 HDFS&#xff1a; 支持从 Hadoop 分布式文件系…

Unity协程详解

什么是协程 协程&#xff0c;即Coroutine&#xff08;协同程序&#xff09;&#xff0c;就是开启一段和主程序异步执行的逻辑处理&#xff0c;什么是异步执行&#xff0c;异步执行是指程序的执行并不是按照从上往下执行。如果我们学过c语言&#xff0c;我们应该知道&#xff0…

【Python数据预处理系列】掌握数据清洗技巧:如何高效使用drop()函数去除不需要的列

目录 一、准备数据 二、使用drop函数去除掉指定列 在数据分析和预处理的过程中&#xff0c;经常会遇到需要从数据集中移除某些列的情况。本文将引导您了解如何使用drop函数高效地去除不需要的列&#xff0c;帮助您提升数据处理技能&#xff0c;确保您的数据集只包含对分析有价…

基于SSM框架的垃圾分类系统的设计与实现(含源码+sql+开题报告+论文+论文答辩模板)

图1 前台首页截图 首页展示&#xff1a;首页展示法律法规、公示公告、用户交流论坛、分类指南、垃圾站点、以及个人中心&#xff1b; 法律法规&#xff1a;展示我国《城市生活垃圾分类及其评价标准》以及《生活垃圾分类标志》等最新法律法规&#xff1b; 公示公告&#xff1…

机器视觉——多图颜色检测

今天我们实现将一组图片导入&#xff0c;然后对它们进行颜色检测分类。 比如下面一组图片&#xff1a; 首先我们需要导入这组图片 之后会在编辑器里面生成这样一段代码 之后再继续相应代码编写 &#xff0c;我的思路是利用颜色空间转换 RGB转到HSV trans_from_rgb(R, G, B,…

docker镜像深入理解

大家好&#xff0c;本篇文章和大家聊下docker相关的话题~~ 工作中经常有关于docker镜像的问题&#xff0c;让人百思不解 docker镜像加载到系统中到哪里去了&#xff1f;docker load 加载镜像的流程是怎样的&#xff1f;为什么容器修改内容后&#xff0c;删除容器后再次开启容…

小公司的软件开发IT工具箱

目录 工具链困境 难题的解决 达到的效果 资源要求低 工具箱一览 1、代码管理工具 2、自动化发版&#xff08;测试&#xff09;工具 3、依赖库&#xff08;制品包&#xff09;管理 4、镜像管理 5、授权管理&#xff08;可选&#xff09; 待讨论&#xff1a;为什么不是…

1.音视频开篇

目录 音视频播放的原理 音视频数据格式YUV YUV数据存储比 ​编辑 YUV空间格式 RGB与YUV转换 音视频播放的原理 主要分为&#xff1a;解协议->解封装->解码->音视频同步->播放。当然&#xff0c;如果是本地播放&#xff0c;没有解协议这一步骤。 采集数据其实…

hutool工具实践-缓存

简介 依赖引入 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-cache</artifactId><version>5.8.17</version></dependency> hutool工具既可以像上一章hutool工具实践-验证码-CSDN博客所说直接全部引入&#x…

uniapp app与mini program相互跳转

app跳微信小程序 方法1&#xff1a;通过URL Schema跳转 参考文档获取 URL Scheme | 微信开放文档 方法2: 通过URL Link跳转 参考文档获取加密 URL Link | 微信开放文档 注意点&#xff1a; 上述两个方法生成的url&#xff0c;需要先通过浏览器打开链接&#xff0c;再自动跳…

5-Django项目--分页与搜索(资产页面)

目录 views/asset_data.py asset_data/asset_data.html 搜索与分页笔记: 搜索 整数搜索 字符串搜索 分页 views/asset_data.py # -*- coding:utf-8 -*- from django.shortcuts import render, redirect, HttpResponse from django.utils.safestring import mark_safe f…

如何使自己写的代码易读易懂?

〓● 如果代码可读性不佳、不容易理解&#xff0c;可能造成如下问题&#xff1a; 〓❏ 其他工程师浪费时间解读它&#xff1b; 〓❏ 误解导致引入缺陷&#xff1b; 〓❏ 其他工程师修改时破坏代码。 〓● 提高代码可读性&#xff0c;有时候可能使其变得更为冗长、占用更多的…

nesting in wrf

Choices for Nesting are:0 no nesting (only available for serial and smpar) 0. no nesting (only available for serial and smpar)1. basic2. preset moves preset moves3. vortex following • default is option 0 for serial/smpar, 1 for dmpar • smpar Shared Mem…

应对800G以太网挑战:数据中心迁移

在过去几年中&#xff0c;云基础设施和服务的大规模使用推动了对更多带宽、更快速度和更低延迟性能的需求。交换机和服务器技术的改进要求布线和架构随之调整。因此&#xff0c;800G以太网对数据中心迁移的需求&#xff0c;特别是对速率&#xff08;包括带宽、光纤密度和通道速…

YOLOv10(1):初探,训练自己的数据

目录 1. 写在前面 2. 值得关注的点 3. 训练自己的数据集 4. 阅读代码的小建议 1. 写在前面 很多人YOLOv9还没有完全研究透&#xff0c;YOLOv10出来了。 惊不惊喜&#xff0c;意不意外&#xff01; 据论文里提到&#xff0c;YOLOv10就是为了加速推理&#xff0c;在保证精度的…

C# NX二次开发-设置背景颜色

使用UF函数能直接设置UG背景颜色: 1.设置背景颜色选项为纯色: 2.编写更新背景颜色代码: var nxColor NXColor.Factory._Get(186);var rgb nxColor.GetRgb();double[] arr [rgb.R, rgb.G, rgb.B];theUf.Disp.SetColor(UFConstants.UF_DISP_BACKGROUND_COLOR, UFConstants.UF…

Java中连接Mongodb进行操作

文章目录 1.引入Java驱动依赖2.快速开始2.1 先在monsh连接建立collection2.2 java中快速开始2.3 Insert a Document2.4 Update a Document2.5 Find a Document2.6 Delete a Document 1.引入Java驱动依赖 注意&#xff1a;启动服务的时候需要加ip绑定 需要引入依赖 <dependen…

Qt无边框

最简单的可拖动对话框(大小不可改变) #ifndef DIALOG_H #define DIALOG_H/*** file dialog.h* author lpl* brief 无边框dialog类* date 2024/06/05*/ #include <QDialog> #include <QMouseEvent> namespace Ui { class Dialog; } /*** brief The Dialog class* 无…