vue3引入vuex基础

一:前言

        使用 vuex 可以方便我们对数据的统一化管理,便于各组件间数据的传递,定义一个全局对象,在多组件之间进行维护更新。因此,vuex 是在项目开发中很重要的一个部分。接下来让我们一起来看看如何使用 vuex 吧!

二:实现步骤

1、安装依赖

        使用 npm i vuex 来安装 vuex 依赖

npm i vuex

2、创建文件与初始化

        在 src 目录下,新建路径为 store/index.ts 的文件,其内部的代码如下,在 state 里定义变量。

import { createStore } from 'vuex'
// 类似 Redux 中的建立状态树export default createStore({// 1、 存储所有全局数据state: {person: {name: '张三',age: 20}},// 2、 需要通过计算获取state里的内容获取的数据// 只能读取不可修改getters: {getPerson(state){return state.person}},//  3、定义对state的各种操作// why不直接实现在mutation里需要写到action里?// mtations不能执行异步操作。aq:从云端获取信息-->(等待云端反馈)更新到state异步操作// 因此说:对于异步操作需要放到action里,简单的直接赋值操作可以直接放到mutation里mutations: {updataPerson(state, pserson) {state.person.name = pserson.name;}},// 3、定义对state的各种操作// actions无法直接修改state,需要在mutations里更新// mutation不支持异步,所以需要在action里写api到urlactions: {// 比说action定义了更新state的操作// 但是不可对其直接修改// 所有的修改操作必须放到mutations里},// state中信息过长时// 用来将state进行分割modules: {}
})

        注意:在这一步可能会遇到如下提示,这是一个识别错误的问题。

        解决方法也很简单,我们去在 src 目录下面 vite-env.d.ts 文件添加如下配置,这时候就会发现这个错误没有了。

declare module "vuex" {export * from "vuex/types/index.d.ts";export * from "vuex/types/helpers.d.ts";export * from "vuex/types/logger.d.ts";export * from "vuex/types/vue.d.ts";
}

3、在main.ts 中引用

        这里就是没有注释掉的最下面两行,是我们需要进行添加或者修改的。其余的代码不用管,复制的时候请删掉。

import { createApp } from 'vue'
// 下面这个是vue3自带的样式
// import './style.css'
import App from '@/App.vue'
import router from '@/router'
// 清除默认样式
import './index.css'// 引入ElementPlus
import ElementPlus from 'element-plus' //全局引入
import 'element-plus/dist/index.css'// vuex的引入
import store from './store'// 引入 Echarts
// import echarts from 'echarts'// App.prototype.$echarts = echarts createApp(App).use(router).use(ElementPlus).use(store).mount('#app')

4、页面引用 

// JS 部分
import store from '@/store/index.ts'let person1 = store.getters.getPerson    //从组件中获取状态(数据)person 方式一
let person2 = store.state.person      //从组件中获取状态(数据)person 方式二// HTML部分{{ person1 }}--{{ person2 }}

下面是运行的效果图,可以看到我们定义在 vuex 里的数据已经成功渲染在了前端页面上

三:尾记

        以上就是 vuex 的一些基础使用啦,当然本篇幅是面向小白的,因此写的内容都是较为基础的。后面我会去写一篇 vuex 各个方法的深入讲解。有兴趣的小伙伴可以走个三连后面再来看哦~

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

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

相关文章

linux文件I/O:文件锁的概念、函数以及代码实现

文件锁是一种用来保证多个进程对同一个文件的安全访问的机制。文件锁可以分为两种类型:建议性锁和强制性锁。建议性锁是一种协作式的锁,它只有在所有参与的进程都遵守锁的规则时才有效。强制性锁是一种强制式的锁,它由内核或文件系统来强制执…

使用Pytorch从零开始构建RNN

在这篇文章中,我们将了解 RNN(即循环神经网络),并尝试通过 PyTorch 从头开始​​实现其中的部分内容。是的,这并不完全是从头开始,因为我们仍然依赖 PyTorch autograd 来计算梯度并实现反向传播&#xff0c…

Apache访问控制

服务器相关的访问控制 Options指令 Options指令是Apache服务器配置文件中的一个重要指令,它可以用于控制特定目录启用哪些服务器特性。Options指令可以在Apache服务器的核心配置、虚拟主机配置、特定目录配置以及.htaccess文件中使用。 以下是一些常用的服务器特性选项: N…

Django(九、cookie与session)

文章目录 一、cookie与session的介绍HTTP四大特性 cookiesession Django操作cookie三板斧基于cookie的登录功能 一、cookie与session的介绍 在讲之前我们先来回忆一下HTTP的四大特性 HTTP四大特性 1.基于请求响应 2.基于TIC、IP作用于应用层上的协议 3.无状态 保存…

二叉查找(排序)树你需要了解一下

简介 二叉排序树(Binary Sort Tree),又称二叉查找树(Binary Search Tree),亦称二叉搜索树,是一种重要的数据结构。 它有以下特性: 若左子树不空,则左子树上所有结点的…

目标检测YOLO系列从入门到精通技术详解100篇-【图像处理】目标检测

目录 几个高频面试题目 如何在超大分辨率的图片中检测目标? 1当超大分辨率图像邂逅目标检测任务 2You Only Look Twice

边缘计算多角色智能计量插座 x 资产显示标签:实现资产追踪与能耗管理的无缝结合

越来越多智慧园区、智慧工厂、智慧医院、智慧商业、智慧仓储物流等企业商家对精细化、多元化智能生态应用场景的提升,顺应国家节能减排、环保的时代潮流,设计一款基于融合以太网/WiFi/蓝牙智能控制的智能多角色插座应运而生,赋予智能插座以遥…

大数据学习(23)-hive on mapreduce对比hive on spark

&&大数据学习&& 🔥系列专栏: 👑哲学语录: 承认自己的无知,乃是开启智慧的大门 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言📝支持一下博主哦&#x1f91…

uniapp实现表单弹窗

uni.showModal({title: 删除账户,confirmColor:#3A3A3A,cancelColor:#999999,confirmText:确定,editable:true,//显示content:请输入“delete”删除账户,success: function (res) {console.log(res)if(res.confirm){if(res.contentdelete){console.log(123123123213)uni.setSto…

PCIE链路训练-状态跳转1

A:12ms超时,或者再任何lane上检测到Electrical Idle Exit; B: 1.发送“receiver detection”之后没有一个lane的接收逻辑被rx检测到 2.不满足条件c,比如两次detection出现差别; C:发送端在没…

凸优化基础与应用

诸神缄默不语-个人CSDN博文目录 文章目录 1. 线性规划用SciPy求解 2. 二次规划3. 半定规划4. 锥规划 凸优化是数学优化的一个重要分支,广泛应用于各种工程和科学领域。它的核心特征在于优化问题的目标函数和约束条件是凸的,这使得找到全局最优解变得可行…

Ps:背景橡皮擦工具抠图实例

背景橡皮擦工具 Background Eraser Tool由于是一个破坏性的工具(直接删除像素)而少被人使用。 其实,它不仅是一个功能强大的抠图工具,也是可以转换为非破坏性运用的。 原图(注:图片来自网络) 效…

微软离Altman越近,离OpenAI就越远!

大数据产业创新服务媒体 ——聚焦数据 改变商业 在OpenAI这场连续剧中(之所以说是连续剧,这个事情肯定没完,后面肯定还会出续集),让我倍感意外的是,Altman刚跟OpenAI分手,“离婚手续”都还没办…

使用Pytorch从零开始构建WGAN

引言 在考虑生成对抗网络的文献时,Wasserstein GAN 因其与传统 GAN 相比的训练稳定性而成为关键概念之一。在本文中,我将介绍基于梯度惩罚的 WGAN 的概念。文章的结构安排如下: WGAN 背后的直觉;GAN 和 WGAN 的比较;…

selenium新版使用find_element/find_elements函数锁定元素(替换原有find_element_by_xx)

css选择器请参考:网络爬虫之css选择器 原来的find_element_by_xx都被修改为find_element(返回匹配到的第一个元素)或find_elements(返回全部的匹配元素) from selenium.webdriver.common.by import By示例程序 选择…

【Q3——30min】

1、介绍一下数据库的三大范式 第一范式(1NF):属性不可分割,即每个属性都是不可分割的原子项。(实体的属性即表中的列) 第二范式(2NF):满足第一范式;且不存在部分依赖,即非主属性必须完全依赖于主属性。(主属性即主键&a…

minio集群部署(k8s内)

一、前言 minio的部署有几种方式,分别是单节点单磁盘,单节点多磁盘,多节点多磁盘三种方式,本次部署使用多节点多磁盘的方式进行部署,minio集群多节点部署最低要求需要4个节点,集群扩容时也是要求扩容的节点…

2、数仓理论概述与相关概念

1、问:数据仓库 建设过程中 经常会遇到那些问题? 模型(逻辑)重复建设 数据不一致性 维度不一致:命名、维度属性值、维度定义 指标不一致:命名、计算口径 数据不规范(字段命名、表名、分层、主题命名规范) 2、OneData数据建设核心方…

python爬虫HMAC加密案例:某企业信息查询网站

声明: 该文章为学习使用,严禁用于商业用途和非法用途,违者后果自负,由此产生的一切后果均与作者无关 一、找出需要加密的参数 js运行 atob(‘aHR0cHM6Ly93d3cucWNjLmNvbS93ZWIvc2VhcmNoP2tleT0lRTQlQjglODclRTglQkUlQkUlRTklOUI…

飞桨——总结PPOCRLabel中遇到的坑

操作系统:win10 python环境:python3.9 paddleocr项目版本:2.7 1.报错:ModuleNotFoundError: No module named Polygon(已解决) 已解决所以没有复现报错内容 尝试方法一:直接使用pip命令安装&…