vuex使用modules模块化

1、main.js引入

//引入vuex
import store from './store'
new Vue({el: '#app',router,store,components: { App },template: '<App/>',data:function(){return{wbWinList: []   // 定义的变量,全局参数}},
})

在这里插入图片描述

2、index.js

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user'Vue.use(Vuex);const store = new Vuex.Store({state: {// 定义要传递的数据datas: [],id:1},getters: {doneTodos (state) {state.datas.push({"dade":666})return state.datas.length+8}},// 定义修改数据的 mutationmutations: {setData(state, newDatas) {state.id = newDatas;}},// 定义分发数据的 action,用于异步调用mutationsactions: {updateDatas({ commit }, datas) {commit('setData', datas);}},// 模块化modules:{user}
});// 全局使用
// console.log(this.$store.state)
// console.log(this.$store.state.user.id)export default store;

2、user.js

import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);const user = new Vuex.Store({state: {// 定义要传递的数据id:2},mutations: {// 定义修改数据的 mutationSET_DATAS(state, newDatas) {state.datas = newDatas;}},actions: {// 定义分发数据的 actionupdateDatas({ commit }, datas) {commit('SET_DATAS', datas);}}
});export default user;

3、使用


<template><div @click="dadepp">{{dades}}</div>
</template><script>export default{data(){return {dades:6666}},methods:{dadepp(){// 调用gettersconsole.log(this.$store.getters.doneTodos)console.log(this.$store.state)console.log(this.$store.state.user.id)// 调用mutationsthis.$store.commit("setData",10)console.log(this.$store.state)//调用actionsthis.$store.dispatch("updateDatas",20)console.log(this.$store.state)}}}
</script><style scoped>.dade{-webkit-box-shadow: 0 2px 0px 0 rgba(0,0,0,.1);box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);}.draggable-div {position: absolute;}
</style>

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

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

相关文章

python实战(一)——iris鸢尾花数据集分类

一、任务背景 本文是python实战系列专栏的第一篇文章&#xff0c;我们将从分类开始由浅入深逐步学习如何使用python完成常规的机器学习/深度学习任务。iris数据集是经典的机器学习入门数据集&#xff0c;许多分类任务教程都会以这个数据集作为示例&#xff0c;它的数据量是150条…

路由器 相关知识

一、路由器是什么 参考&#xff1a;图解系列--路由器和它庞大的功能_路由功能-CSDN博客 路由器是指&#xff1a;主要负责 OSI参考模型中网络层的处理工作&#xff0c;并根据路由表信息在不同的网络 之间转发IP 分组的网络硬件(图3-1)。这里的网络一般是指IP 子网&#xff0c;…

Redis 发布订阅 总结

前言 相关系列 《Redis & 目录》&#xff08;持续更新&#xff09;《Redis & 发布订阅 & 源码》&#xff08;学习过程/多有漏误/仅作参考/不再更新&#xff09;《Redis & 发布订阅 & 总结》&#xff08;学习总结/最新最准/持续更新&#xff09;《Redis &a…

回顾项目测试全过程,测试如何回答“测完了吗?”

“测完了吗&#xff1f;” 是系统测试岗位同学经常被问到的问题&#xff0c;提问的人可能是合作的研发&#xff0c; 合作的产品经理&#xff0c;甚至是项目的业务方&#xff0c;也有可能是测试自己。 这个问题至少有两层意思&#xff0c;不仅问新功能测试进度是否完成&#xf…

qt QMediaPlaylist

QMediaPlaylist 是 Qt Multimedia 模块中的一个类&#xff0c;用于管理媒体文件的播放列表。它提供了一种方便的方式来组织和控制多媒体内容的播放&#xff0c;如音频和视频文件。 主要方法 QMediaPlaylist(00bject *parent nullptr):构造一个新的媒体播放列表对象。void add…

论文解析八: GAN:Generative Adversarial Nets(生成对抗网络)

目录 1.GAN&#xff1a;Generative Adversarial Nets&#xff08;生成对抗网络&#xff09;1、标题 作者2、摘要 Abstract3、导言 IntroductionGAN的介绍 4、相关工作 Related work5、模型 Adversarial nets总结 6.理论计算 Theoretical Results具体算法公式全局优化 Global O…

【Java网络编程】从套接字(Socket)概念到UDP与TCP套接字编程

目录 网络编程 1.socket套接字 2.udp数据报套接字编程 DatagramSocket API DatagramPacket API Java基于UDP实现客户端-服务器代码实例 3.tcp流套接字编程 ServerSocket API Socket API TCP中的长短连接 Java基于TCP客户端-服务器代码实例 网络编程 1.socket套接字 S…

正则表达式基本语法(快速认知)

正则表达式:一种用于匹配字符串的模式。它可以用于搜索、替换、验证字符串等多种操作。 基本语法: 字符类: [abc]: 匹配 a、b 或 c。[a-z]: 匹配小写字母。[A-Z]: 匹配大写字母。[0-9]: 匹配数字母 比如我们的电话号码是11个数字组成, 则可以表示为: String tel"[0-9][0…

uniapp 引入了uview-ui后,打包错误,主包过大解决方案

原因&#xff1a;由于使用uniapp来设计小程序&#xff0c;使用uview的组件库&#xff0c;导致了主包过大&#xff0c;无法打包 前提条件&#xff1a;已经完成了分包&#xff0c;如果还没有分包的先分包&#xff0c;需要上传代码时用到 1. 通常情况&#xff0c;大多数都是通过点…

构建中小企业设备管理平台:Spring Boot应用

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

ReactOS系统中平衡二叉树按从左到右的顺序找到下一个结点

ReactOS系统中平衡二叉树按从左到右的顺序找到下一个结点MmIterateNextNode()按从左到右的顺序找到下一个结点 文章目录 ReactOS系统中平衡二叉树按从左到右的顺序找到下一个结点MmIterateNextNode()按从左到右的顺序找到下一个结点MmIterateNextNode() MmIterateNextNode() /*…

深入剖析 C 与 C++ 动态内存管理之术

亲爱的读者朋友们&#x1f603;&#xff0c;此文开启知识盛宴与思想碰撞&#x1f389;。 快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f970;&#xff0c;共创活力社区。 &#x1f525;&#x1f525;&#x1f525;【C】进阶&#xff1a;类相关…

Python实现基于WebSocket的stomp协议调试助手工具

stomp协议很简单&#xff0c;但是搜遍网络竟没找到一款合适的客户端工具。大多数提供的都是客户端库的使用。可能是太简单了吧&#xff01;可是即便这样&#xff0c;假如有一可视化的工具&#xff0c;将方便的对stomp协议进行抓包调试。网上类似MQTT的客户端工具有很多&#xf…

linux shell 脚本语言教程(超详细!)

Shell 编程详细指南 什么是 Shell&#xff1f; Shell 是用户与操作系统内核之间的接口&#xff0c;允许用户通过命令行输入来控制操作系统。它充当命令解释器&#xff0c;读取用户输入的命令并执行相应的操作。Shell 提供了强大的脚本编程能力&#xff0c;可以自动化许多任务…

【javax maven项目缺少_Maven的依赖管理 引入依赖】

javax maven项目缺少_Maven的依赖管理 引入依赖 Maven的依赖管理 - 引入依赖依赖管理(引入依赖)导入依赖 https://blog.csdn.net/weixin_28932089/article/details/112381468 Maven的依赖管理 - 引入依赖 依赖管理(引入依赖) 能够掌握依赖引入的配置方式 导入依赖 导入依赖练…

银行客户贷款行为数据挖掘与分析

#1024程序员节 | 征文# 在新时代下&#xff0c;消费者的需求结构、内容与方式发生巨大改变&#xff0c;企业要想获取更多竞争优势&#xff0c;需要借助大数据技术持续创新。本文分析了传统商业银行面临的挑战&#xff0c;并基于knn、逻辑回归、人工神经网络三种算法&#xff0…

重构案例:将纯HTML/JS项目迁移到Webpack

我们已经了解了许多关于 Webpack 的知识&#xff0c;但要完全熟练掌握它并非易事。一个很好的学习方法是通过实际项目练习。当我们对 Webpack 的配置有了足够的理解后&#xff0c;就可以尝试重构一些项目。本次我选择了一个纯HTML/JS的PC项目进行重构&#xff0c;项目位于 GitH…

[旧日谈]高清画面撕裂问题考

背景 无边框透明背景透明的窗口&#xff0c;在随着缩放比例非整数倍数放大时的画面发生了露底、撕裂问题。 当我们在使用Qt开发的时候&#xff0c;遇到了一个结构性问题。因为我们的软件是自己做的&#xff0c;所以要自己定义标题栏&#xff0c;所以我们设置了软件为FrameLess…

mono源码交叉编译 linux arm arm64全过程

初级代码游戏的专栏介绍与文章目录-CSDN博客 我的github&#xff1a;codetoys&#xff0c;所有代码都将会位于ctfc库中。已经放入库中我会指出在库中的位置。 这些代码大部分以Linux为目标但部分代码是纯C的&#xff0c;可以在任何平台上使用。 源码指引&#xff1a;github源…

mysql——事务详解

一、事务定义 事务&#xff1a;事务是一个最小的不可在分的工作单元&#xff1b;通常一个事务对应一个完整的业务(例如银行账户转账业务&#xff0c;该业务是一个最小的工作单元)事务保证多条sql语句要么同时执行成功&#xff0c;要么同时执行失败一个完整的业务需要批量的DML…