Vuex基本使用

news2025/2/24 23:07:46

目录

  • 一、什么是vuex
  • 二、什么时候使用 Vuex
  • 三、Vuex 工作原理图
  • 四、vuex 核心概念和 API
    • 4.1 state
    • 4.2 actions
    • 4.3 mutations
    • 4.4 getters
  • 五、代码生成器
    • 5.1 mapGetters
    • 5.2 mapState
    • 5.3 mapActions
    • 5.4 mapMutations
  • 六、vuex模块化编码
  • 七、求和案例

一、什么是vuex

专门在 Vue 中实现集中式状态（数据）管理的一个Vue 插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

二、什么时候使用 Vuex

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

三、Vuex 工作原理图

在这里插入图片描述

四、vuex 核心概念和 API

4.1 state

  1. vuex 管理的状态对象
  2. 它应该是唯一的
    //准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

4.2 actions

  1. 值为一个对象，包含多个响应用户动作的回调函数
  2. 通过 commit( )来触发 mutation 中函数的调用, 间接更新state
  3. 如何触发 actions 中的回调？
    在组件中使用: $store.dispatch('对应的 action 回调名') 触发
  4. 可以包含异步代码（定时器, ajax 等等）
    //准备actions——用于响应组件中的动作
const actions = {
	jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	}
}

4.3 mutations

  1. 值是一个对象，包含多个直接更新 state 的方法
  2. 谁能调用 mutations 中的方法？如何调用？
    在 action 中使用：commit('对应的 mutations 方法名') 触发
  3. mutations 中方法的特点：不能写异步代码、只能单纯的操作state
    //准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		state.sum += value
	}
}

4.4 getters

  1. 值为一个对象，包含多个用于返回数据的函数
  2. 如何使用？—— $store.getters.xxx
  3. 示例代码：
    //准备getters——用于将state中的数据进行加工
const getters = {
	bigSum(state){
		return state.sum*10
	}
}

五、代码生成器

5.1 mapGetters

    computed:{
        //自己实现
        // bigSum(){
        //     return this.$store.getters.bigSum
        // },
        //使用Vuex的mapGetters生成和getters相关的代码,从getters中读取数据
        ...mapGetters({bigSum:'bigSum'})
    },

5.2 mapState

    computed:{
        //自己实现代码
        // sum(){
        //     return this.$store.state.sum  
        // },
        // school(){
        //     return this.$store.state.school
        // },
        // subject(){
        //     return this.$store.state.subject
        // },
        //使用Vuex的mapState生成和state相关的代码,...代表把mapState中的方法或者属性放到computed中
        //对象写法
        // ...mapState({sum:'sum',school:'school',subject:'subject'}),
        //数组写法
        ...mapState(['sum','school','subject']),
    }

5.3 mapActions

    methods: {
    	//自己实现
        // incrementOdd(){
        //     this.$store.dispatch('jiaOdd',this.n)

        // },
        // incrementWait(){
        //     this.$store.dispatch('jiaWait',this.n) 
        // }
        //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
        ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
        //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
        // ...mapActions(['jiaOdd','jiaWait'])
    },

5.4 mapMutations

methods: {
		//自己实现
        // increment(){
        //     //如果没有什么业务逻辑可以直接commit
        //     this.$store.commit('JIA',this.n)
        // },
        // decrement(){
        //     //如果没有什么业务逻辑可以直接commit
        //     this.$store.commit('JIAN',this.n)
        // },
        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
        ...mapMutations({increment:'JIA',decrement:'JIAN'}),
        //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
        // ...mapMutations(['JIA','JIAN']),
     
    }

六、vuex模块化编码

在实际开发中我们的业务会分为很多种，如果把不同业务的功能都写在一个文件里的话就会很不好维护，所以我们可以把每个业务单独形成一个模块。
例如：现在有一个count和person模块

count.js

//求和相关配置
export default {
    //开启命名空间，默认为false
    namespaced:true,
    actions:{
        jiaOdd(context,value){
            if (context.state.sum%2) {
                context.commit('JIA',value)
            }
        },
        jiaWait(context,value){
            setTimeout(()=>{
                context.commit('JIA',value)
            },500)    
        }
    },
    mutations:{
        JIA(state,value){
            state.sum+=value
        },
        JIAN(state,value){
            state.sum-=value
        },
    },
    state:{
        sum:0,//当前的和
        school:'b站大学',
        subject:"vue",
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
}

person.js

import axios from "axios"
import { nanoid } from "nanoid"
//人员管理相关配置
export default {
    //开启命名空间，默认为false
    namespaced:true,
    actions:{
        addPersonWang(context,value){
            if(value.name.indexOf('王')===0){
                context.commit('ADD_PERSON',value)
            }else{
                alert('添加的人必须姓王！')
            }
        },
        //从服务器获取数据
        addPersonServer(context){
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response=>{
                    context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
                },
                error=>{
                    console.log(error.message)
                }
            )
        }
    },
    mutations:{
        ADD_PERSON(state,value){
            if(value.name === ''){
                alert("不能为空！")
            }else{
                state.personList.unshift(value)
            }
        }
    },
    state:{
        personList:[
            {id:'001',name:'张三'}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }

合并业务:将count和person配置到Vuex.Store
index.js

//该文件用于常见Vuex中最为核心的store

//引入Vuex
import Vuex from 'vuex'
//引入Vue
import Vue from 'vue'

import countOptions from './count'
import personOptions from './person'
Vue.use(Vuex)

//创建store，并对外暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})

main.js

import Vue from "vue"
import App from "./App.vue"
//引入store
import store from './store/index'
//引入插件
import VueResource from "vue-resource";
Vue.config.productionTip=false;
//使用插件
Vue.use(VueResource)

const vm = new Vue({
    el:"#app",
    render:h=>h(App),
    store,
    beforeCreate(){
        Vue.prototype.$bus=this
    }
})

七、求和案例

目录结构：
在这里插入图片描述

Count.vue

<template>
	<div>
		<h1>当前求和为：{{$store.state.sum}}</h1>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment">+</button>
		<button @click="decrement">-</button>
		<button @click="incrementOdd">当前求和为奇数再加</button>
		<button @click="incrementWait">等一等再加</button>
	</div>
</template>

<script>
	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.commit('JIA',this.n)
			},
			decrement(){
				this.$store.commit('JIAN',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('jiaOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('jiaWait',this.n)
			},
		},
		mounted() {
			console.log('Count',this)
		},
	}
</script>

<style lang="css">
	button{
		margin-left: 5px;
	}
</style>

index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
	/* jia(context,value){
		console.log('actions中的jia被调用了')
		context.commit('JIA',value)
	},
	jian(context,value){
		console.log('actions中的jian被调用了')
		context.commit('JIAN',value)
	}, */
	jiaOdd(context,value){
		console.log('actions中的jiaOdd被调用了')
		if(context.state.sum % 2){
			context.commit('JIA',value)
		}
	},
	jiaWait(context,value){
		console.log('actions中的jiaWait被调用了')
		setTimeout(()=>{
			context.commit('JIA',value)
		},500)
	}
}
//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){
		console.log('mutations中的JIA被调用了')
		state.sum += value
	},
	JIAN(state,value){
		console.log('mutations中的JIAN被调用了')
		state.sum -= value
	}
}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}

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

App.vue

<template>
	<div>
		<Count/>
	</div>
</template>

<script>
	import Count from './components/Count'
	export default {
		name:'App',
		components:{Count},
		mounted() {
			// console.log('App',this)
		},
	}
</script>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import vueResource from 'vue-resource'
//引入store
import store from './store'

//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
	beforeCreate() {
		Vue.prototype.$bus = this
	}
})

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

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

相关文章

文本生成人工评价指标及一致性校验方法总结（附代码实现）

文本生成人工评价指标及一致性校验方法总结（附代码实现）

前言&#xff1a;人工评估&#xff08; Manual Evaluation / Human Evaluation&#xff09;是文本生成工作评估中非常重要的一环。在对模型的文本生成质量进行评估时&#xff0c;除客观的自动评价指标&#xff0c;还需有人工评价指标的主观判断&#xff0c;综合二者的结果完成评…
阅读更多...
zabbix监控自己

zabbix监控自己

目录 一、实验环境准备 二、server端 1、配置阿里云yum源 2、部署lamp环境 3、启动lamp对应服务 4、准备java环境 5、源码安装zabbix 6、mariadb数据库授权 7、创建zabbix程序用户并授权防止权限报错 8、修改zabbix配置文件 9、配置php与apache 10、web安装zabbix …
阅读更多...
[回馈]ASP.NET Core MVC开发实战之商城系统(开篇)

[回馈]ASP.NET Core MVC开发实战之商城系统(开篇)

在编程方面&#xff0c;从来都是实践出真知&#xff0c;书读百遍其义自见&#xff0c;所以实战是最好的提升自己编程能力的方式。 前一段时间&#xff0c;写了一些实战系列文章&#xff0c;如&#xff1a; ASP.NET MVC开发学生信息管理系统VueAntdvAsp.net WebApi开发学生信息…
阅读更多...
地摊盛行，VR全景如何帮助实体餐饮商家人气翻倍？

地摊盛行，VR全景如何帮助实体餐饮商家人气翻倍？

“民以食为天”&#xff0c;餐饮行业始终在市场经济中扮演着重要角色&#xff0c;前有“淄博烧烤火爆出圈”&#xff0c;后有“地摊经济夜市亮相”&#xff0c;可以看到餐饮行业呈现出市场广阔、高频刚需、标准化程度低的特点。但是地摊经济的盛行&#xff0c;让很多实体餐饮商…
阅读更多...
【漏洞修复】node-exporter被检测/debug/vars泄漏信息漏洞

【漏洞修复】node-exporter被检测/debug/vars泄漏信息漏洞

node-exporter被检测/debug/vars泄漏信息漏洞 漏洞说明修复方法 漏洞说明 和之前的pprof类似&#xff0c;都是国产的安全工具扫出来的莫名其妙的东西&#xff0c;这次也是报的node-exporter存在这个漏洞&#xff0c;又归我处理。当访问node-exporter的/debug/vars路由时能获取…
阅读更多...
Ubuntu22.04下安装Ros2-Humble

Ubuntu22.04下安装Ros2-Humble

ROS2的Humble版本为TLS版本&#xff0c;维护日期截止到2027年&#xff08;可以参考这里确查看Humble和Ubuntu系统的关系&#xff09; 可以看到&#xff0c;其支持Linux/MacOS/Windows等多个系统&#xff0c;针对于Linux系统&#xff0c;对应的系统版本是(Ubuntu 22.04&#xff…
阅读更多...
el-checkbox获取选中的id

el-checkbox获取选中的id

获取选中checkbox的label和value <el-checkbox-group v-model="checkedAlarmObj"><el-checkbox @change="changeObj" v-for="item in alarmObj" :label="item.roleName" :key="item.roleId":value="…
阅读更多...
断路器绝缘电阻试验

断路器绝缘电阻试验

断路器 绝缘电阻试验 试验目的 检验断路器合闸后灭弧室、 主绝缘和提升杆是否发生受潮&#xff0c; 劣化变质等缺陷。 试验设备 绝缘电阻测试仪 厂家&#xff1a; 湖北众拓高试 试验接线 相对地 端口间 试验步骤 真空断路器本体与断口的绝缘电阻 试验前对兆欧表本身进行检…
阅读更多...
2023年了，为何 Selenium 依然这么火？

2023年了，为何 Selenium 依然这么火？

今天给大家带来的主题是自动化测试框架Selenium&#xff0c;话不多说&#xff0c;直接开始&#xff01; 1.什么是 Selenium 自动化测试 Jason Huggins 于 2004 年创建了一个 JavaScript 框架&#xff0c;旨在将其从重复的手动测试中解放出来。 最初命名为 JavaScriptTestRunn…
阅读更多...
grafana备份脚本

grafana备份脚本

备份思路 1、逐个dashboard备份配置 2、每个dashboard保存成一个文件 3、文件名定义为 目录名-dashboard名.json 4、使用python2 5、其中http_header中生成的Authorization API KEY已过期&#xff0c;请自己重新生成后替换使用。 6、保存文件部分适配的是windows&#xf…
阅读更多...
使用IDEA构建jar然后转执行程序exe的爬坑

使用IDEA构建jar然后转执行程序exe的爬坑

https://download.csdn.net/download/leoysq/87939492 构建jar
阅读更多...
【矩阵的创建与基本运算】——matlab基础

【矩阵的创建与基本运算】——matlab基础

目录索引 创建矩阵&#xff1a;zeros()&#xff1a;ones&#xff1a;eye()&#xff1a;magic()&#xff1a;引号创建序列矩阵&#xff1a; 加减与数乘&#xff1a;其他运算&#xff1a;指数运算&#xff1a;*exp()&#xff1a;* 点式运算&#xff1a; 创建矩阵&#xff1a; 如…
阅读更多...
同心筑梦 展翅翱翔 | 2023届GBASE新员工筑梦计划培训报道

同心筑梦 展翅翱翔 | 2023届GBASE新员工筑梦计划培训报道

为帮助新入职员工增进彼此了解&#xff0c;快速融入GBASE大家庭中&#xff0c;激发大家工作热情&#xff0c;为此设计了拓展训练课程。完成“抓住机遇&#xff0c;摆脱困境”“蛟龙出海”“破冰”等环节后&#xff0c;新员工们已完全没有开始时的紧张&#xff0c;在全新的环境中…
阅读更多...
MyBatis的相关api

MyBatis的相关api

1. MyBatis的相关api 1.1 Resources org.apache.ibatis.io.Resources&#xff1a;加载资源的工具类。 核心方法 返回值方法名说明InputStreamgetResourceAsStream(String fileName)通过类加载器返回指定资源的字节流 1.2 构建器SqlSessionFactoryBuilder 建造者设计模式&…
阅读更多...
思维决定发展，测试人也不例外

思维决定发展，测试人也不例外

最近特别懒&#xff0c;不想码字&#xff0c;原本写作就很差&#xff0c;更是退化严重。社招和校招面试过很多人&#xff0c;从十年前自己还很弱的时候学着面试&#xff0c;到数百次面试积累之后&#xff0c;面对候选人的时候&#xff0c;我的内心依然有些许紧张&#xff0c;非…
阅读更多...
MySQL原理探索——31 误删数据后除了跑路，还能怎么办

MySQL原理探索——31 误删数据后除了跑路，还能怎么办

在前面几篇文章中&#xff0c;介绍了 MySQL 的高可用架构。当然&#xff0c;传统的高可用架构是不能预防误删数据的&#xff0c;因为主库的一个 drop table 命令&#xff0c;会通过 binlog 传给所有从库和级联从库&#xff0c;进而导致整个集群的实例都会执行这个命令。 虽然我…
阅读更多...
文件IO 文件属性获取，目录操作

文件IO 文件属性获取，目录操作

文件属性获取 int stat(const char *path, struct stat *buf); 功能&#xff1a;获取文件属性参数&#xff1a; path&#xff1a;文件路径名 buf&#xff1a;保存文件属性信息的结构体返回值&#xff1a; 成功&#xff1a;0 失败&#xff1a;-1struct stat {ino_t st_ino;…
阅读更多...
springboot项目创建整个完成过程和注意事项

springboot项目创建整个完成过程和注意事项

1&#xff1a;application.yml文件配置 server:port: 8088servlet:context-path: /test spring:datasource:name: text #????url: jdbc:mysql://localhost:3306/dsdd?serverTimezoneGMT&useUnicodetrue&characterEncodingutf-8&useSSLtrueusername: root #…
阅读更多...
java模拟MQTT客户端发送消息及EMQX配置

java模拟MQTT客户端发送消息及EMQX配置

EMQX配置 登录地址 首先打开EMQX的管理界面&#xff0c;界面的地址如下&#xff0c; http://192.168.1.110:18083/ 规则是IP就是MQTT的IP&#xff0c;端口是固定的18083&#xff0c;输入该地址后&#xff0c;展示界面如下&#xff1a; 然后输入用户名和密码&#xff0c;用户…
阅读更多...
0132 数据的表示和运算1

0132 数据的表示和运算1

目录 2.数据的表示和运算 2.1数制与编码 2.1部分习题 2.数据的表示和运算 2.1数制与编码 2.1部分习题 1.若定点整数为64位&#xff0c;含1位符号位&#xff0c;则采用补码表示的最大值最大的负数为&#xff08;&#xff09; A. B. C. D. 2.若x的补…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023