Vuex的基本使用

        1.安装vuex

npm i vuex@3

            2.引入

import Vuex from 'vuex'

        3.使用

Vue.use(Vuex)

       

         4.在src下的目录创建store,新建index.js

import store from './store'

        5.编写index.js


import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)


//用于操作组件中的动作
const actions={
      add(context,value){
        context.commit('ADD',value)
      }, 
}
//用于操作数据
const mutations={
    ADD(state,value){
      state.sum += value
    } , 
}
//用于存储数据
const state={  
    sum:1, 
}
//公共方法
const getters={
   getT(state){
    return state.sum*10
   }
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})
 

        6.在main.js中引入并使用store

import store from './store'
store,

        

        7.在组件中调用store中的方法

                7.1获取state中sum的值

{{this.$store.state.sum}}

                7.2获取getters中的getT方法

{{$store.getters.getT}}

                7.3调用store中的add方法,通过 dispatch  在组件中访问vuex的actions,通过commit   在组件中访问vuex的mutations

this.$store.dispatch('add',this.s)
this.$store.commit('ADD',this.s)

                7.4启动项目 ,可以看到我们的功能都还可用

npm run serve

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux安装Node-RED并实现后台运行及开机启动

首先确保系统中已近成功安装Node.js,并保证需要的合适版本: 关于node.js的安装可以参考我的另一篇博文:《AliyunOS安装Node.js》。 然后就可以使用npm工具安装Node-RED了,很简单使用如下命令: sudo npm install -g --unsafe-per…

antd Select前端加模糊搜索

背景&#xff1a;前端的小伙伴经常在开发antd Select的时候后端不提供搜索模糊搜索接口&#xff0c;而是全量返回数据&#xff0c;这个时候就需要我们前端自己来写一个模糊搜索了。 效果 代码截图 代码 <SelectshowSearchmode"multiple"options{studioList}filte…

视频分析、目标检测的过去和未来:目标检测从入门到精通 ------ YOLOv8 到 多模态大模型处理视觉基础任务

文章大纲 计算机视觉项目的关键步骤目标检测入门视频分析项目最佳实践数据集构建数据准备:数据集标注规范与数据规模参考标注工具标注工具:目标检测yolo 极简标注工具综合标注工具:label-studio半自动标注工具:X-AnyLabeling目标检测与多模态哪些多模态模型可以做目标检测?…

构建安全稳定的应用:Spring Security 实用指南

前言 在现代 Web 应用程序中&#xff0c;安全性是至关重要的一个方面。Spring Security 作为一个功能强大且广泛使用的安全框架&#xff0c;为 Java 应用程序提供了全面的安全解决方案。本文将深入介绍 Spring Security 的基本概念、核心功能以及如何在应用程序中使用它来实现…

招聘应聘,HR如何测试候选人的领导能力?

作为企业的HR&#xff0c; 如何通过测评的方式来了解一个人的领导能力&#xff1f; 这里仅仅是说测评的方式&#xff0c;除此以外&#xff0c;还有很多方式&#xff0c;比如&#xff1a;背景调查&#xff0c;无领导小组讨论等等..... 对于一个人的领导能力测试&#xff0c;主要…

网页报错dns_probe_possible 怎么办?——错误代码有效修复

当你在浏览网页时遇到dns_probe_possible 错误&#xff0c;这通常意味着你的浏览器无法解析域名系统&#xff08;DNS&#xff09;地址。这个问题可能是由多种原因引起的&#xff0c;包括网络配置问题、DNS服务问题、或是本地设备的问题。教大家几种修复网页报错dns_probe_possi…

ctfshow-xss(web316-web330)

讲解相当细致 精致练习XSS web316 这道题估计陆陆续续弄了半天 因为xss可以说基本不会 还好最终彻彻底底明白了 首先这道题是反射性xss 也就是必须点击某一个xss链接 才能达到xss效果 这道题的意思就是 写一个祝福语生成链接发送给朋友 这个祝福语的位置就是我们实现XSS的位…

GPT-4预测股票涨跌更更更准了!东京大学新框架LLMFactor提升显著 | ACL 2024

花一秒钟就看透事物本质的人&#xff0c;和花一辈子都看不清的人&#xff0c;注定是截然不同的命运。——唐柯里昂 除了少数天纵奇才&#xff0c;大多数人都是通过知识和阅历的不断积累&#xff0c;才逐渐锻炼出观察和判断事物变化规律的能力。而如果说有一件事&#xff0c;可以…

代码便利工具

【原创】PyCharm 安装MarkDown插件&#xff0c;并修改.md文件默认打开方式_pycharm如何修改markdown-CSDN博客 1.上面是填写README的工具。

DeepFaceLive----AI换脸简单使用

非常强大的软件,官方github https://github.com/iperov/DeepFaceLive 百度云链接: 链接&#xff1a;https://pan.baidu.com/s/1VHY-wxqJXSh5lCn1c4whZg 提取码&#xff1a;nhev 1下载解压软件 下载完成后双击.exe文件进行解压.完成后双击.bat文件打开软件 2 视频使用图片换…

JAVA+SSM+VUE《病人跟踪治疗信息管理系统》

1病人功能模块 病人登录进入病人跟踪治疗信息管理系统可以查看首页、个人中心、病例采集管理、预约管理、医生管理、上传核酸检测报告管理、上传行动轨迹管理、病人治疗状况管理等内容。 病例采集管理&#xff0c;在病例采集管理页面可以查看账号、姓名、住院号、入院时间、病…

2024鲲鹏昇腾创新大赛集训营Ascend C算子学习笔记

异构计算架构&#xff08;CANN&#xff09; 对标英伟达的CUDA CuDNN的核心软件层&#xff0c;向上支持多种AI框架&#xff0c;向下服务AI处理器&#xff0c;发挥承上启下的关键作用&#xff0c;是提升昇腾AI处理器计算效率的关键平台。主要包括有各种引擎、编译器、执行器、算…

[leetcode hot 150]第三题,无重复字符的最长子串

题目&#xff1a; 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长 子串的长度。 可以使用"滑动窗口"的方法来解决这个问题。基本思路如下: 使用两个指针(start和end)来定义一个窗口移动end指针来扩大窗口,直到遇到重复字符如果遇到重复字符,移动s…

Spring源码九:BeanFactoryPostProcessor

上一篇Spring源码八&#xff1a;容器扩展一&#xff0c;我们看到ApplicationContext容器通过refresh方法中的prepareBeanFactory方法对BeanFactory扩展的一些功能点&#xff0c;包括对SPEL语句的支持、添加属性编辑器的注册器扩展解决Bean属性只能定义基础变量的问题、以及一些…

每周题解:最大半连通子图

题目链接 最大半连通子图 题目描述 一个有向图 G ( V , E ) G\left(V,E\right) G(V,E) 称为半连通的 (Semi-Connected)&#xff0c;如果满足&#xff1a; ∀ u , v ∈ V \forall u,v\in V ∀u,v∈V&#xff0c;满足 u → v u\to v u→v 或 v → u v\to u v→u&#xff0…

Go语言实现钉钉机器人接入Dify工作流

go语言实现实现钉钉机器人接入dify工作流&#xff0c;完成ai 流式问答 代码地址 有用的话点个star github地址 效果 配置使用 修改.env_template文件 为.env 设置.env文件内的环境变量 API_KEY: dify的api_keyAPI_URL: dify 的api接口CLIENT_ID : 钉钉机器人应用的idCLIENT…

基于Java的家政预约系统设计与实现

作者介绍&#xff1a;计算机专业研究生&#xff0c;现企业打工人&#xff0c;从事Java全栈开发 主要内容&#xff1a;技术学习笔记、Java实战项目、项目问题解决记录、AI、简历模板、简历指导、技术交流、论文交流&#xff08;SCI论文两篇&#xff09; 上点关注下点赞 生活越过…

Docker-compose 实现Prometheus+Grafana监控MySQL及Linux主机

. ├── Grafana │ ├── data │ └── docker-compose.yaml ├── Mysql │ ├── conf │ ├── data │ ├── docker-compose.yaml │ └── logs ├── Mysqld_exporter │ ├── conf │ └── docker-compose.yaml ├── node-exporter │…

RPA 第一课

RPA 是 Robotic Process Automation 的简称&#xff0c;意思是「机器人流程自动化」。 顾名思义&#xff0c;它是一种以机器人&#xff08;软件&#xff09;来替代人&#xff0c;实现重复工作自动化的工具。 首先要说一句&#xff0c;RPA 不是 ChatGPT 出来之后的产物&#x…

推荐三款常用接口测试工具!

接口测试是软件开发中至关重要的一环&#xff0c;通过对应用程序接口进行测试&#xff0c;可以验证其功能、性能和稳定性。随着互联网和移动应用的快速发展&#xff0c;接口测试变得越来越重要。为了提高测试效率和质量&#xff0c;开发人员和测试人员需要使用专业的接口测试工…