前端vue入门(纯代码)21_vuex

news2024/11/27 18:49:51

努力不一定成功，但是，不努力一定很轻松！！！

【23.Vuex】

[可以去官网看看Vuex3文档](Vuex 是什么？ | Vuex (vuejs.org))

  • 问题1：Vuex是什么？

    • 【官方理解1】：Vuex 是一个专为 Vue.js 应用程序开发的状态【数据】管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools。

    • 【理解2】：vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。

    • 【理解3】：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您的应用够简单，最好不要使用Vuex。

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

  • 问题2：使用Vuex管理数据优势？

  1. 能够在 vuex 中集中管理共享的数据【state中】，便于开发和后期进行维护。
  2. 能够高效的实现组件之间的数据共享，提高开发效率。
  3. 存储在 vuex 中的数据是响应式的，当数据发生改变时，页面中的视图也会同步更新。
  4. vuex中的数据操作可以在开发阶段通过开发调试工具来进行追踪，便于开发。
  • 简单来说，vuex 就是为了实现组件间通信的。使用 vuex 的好处：可以跨层级进行通信；vuex 中的所有操作都有记录；vuex 独立于组件系统，是专门用来管理数据的框架。

注意：

  1. vuex 是 vue 作者为我们提供的一套全局状态管理工具。
  2. 标准化操作数据，代码调试和封装更加有据可行。
  3. 集中式的数据管理，便于查看数据。
  4. vuex 中的数据没有持久化能力，如果想要持久化，可以自行来解决。
  5. vuex 解决的问题是在复杂项目中，组件间的通信。

  • 问题3：什么时候使用Vuex？

    Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

  • 问题4：安装vuex环境

    • 【vue2版本】：需要安装vuex3这个版本

      npm i vuex@3 //@:指定版本

    • 【vue3版本】：需要安装vuex4这个版本

      npm i vuex@4 //@:指定版本

  • 问题5：配置vuex环境

    新建store文件->index.js，进行如下配置，在main.js中进行引入

    //引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

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

    在main.js中创建vm时传入store配置项【因为index.js这种特殊的命名可以被vue识别，所以引入的时候，不用./store/index.js】

    ......
//引入store
import store from './store'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store,
})

Vuex

  • 组件派发【dispatch】任务到actions，actions触发mutations中的方法，然后mutations来改变state中的数据，数据变更后响应推送给组件，组件重新渲染。

成员列表：

  1. state：存放状态(全局状态数据) 必填项。
  2. getters：获取 state 中的数据，可以认为是 store 的计算属性【类似于组件中的计算属性】。
  3. mutations：对于 state 成员进行同步修改操作（也可以支持异步操作）。
  4. actions：进行异步操作，异步得到结果后通知 mutation 修改 state 成员。
  5. modules【模块】：模块化状态管理，多状态文件管理时使用，开发项目时多为多模块项目在多模块 vuex 中会有配置namespaced:true开启命名空间。

Vuex工作流程：

vue 组件会从 vuex 的 state 中获取数据，当组件修改数据时，会经过以下流程：

  • 当触发同步操作时：vue 组件通过 commit 方法通知 mutations （同时 mutations 会在 Devtools 调试工具中记录发生的操作）设置 state 数据，数据设置完成后，state 响应式的让组件重新渲染。

    注意：vuex 存储的数据是响应式的，只要 state 中的数据发成改变，视图就会重新渲染。

  • 当触发异步操作时：vue 组件通过 dispatch 方法通知 actions 和 API【ajax调后端接口返回值】交互，从而得到数据，actions 得到数据之后通过 commit 方法通知 mutations （同时 mutations 会在 Devtools 调试工具中记录发生的操作）设置 state 数据，数据设置完成后，state 响应式的让组件重新渲染。

Devtools为vux官方提供的开发者调试工具，它跟Mutations进行对话。

案例1：vuex求和

  • 【流程的第一步：从vc–通过派发dispatch(‘A’,value)–>actions】：我们看一下actions中jia(context, value)传递的两个参数

子组件.vue【vc】

// 组件派发【dispatch】任务到actions
this.$store.dispatch('字符串的事件类型',要传递的数据)
this.$store.dispatch('jia',this.n)

store/index.js中的actions部分【store】

//准备actions——用于响应组件中的动作【接收组件派发过来的方法】
const actions = {
	jia(context, value) {
    console.log('actions中的jia被调用了')
    context.commit('JIA',value)
	console.log(context);
	console.log(value);
	},
};
  • 第一个参数：context【像一个ministore】
    • ministore中：有commit,dispatch,getters,state等等属性，actions里的操作空间很大【比如：我想在actions中判断一下state中存储数据sum的奇偶性，那么可以这样访问context.state.sum】

  • 第二个参数：value【this.n】

  • 【流程的第二步：从actions/组件–通过commit(‘A/B’,value)–>mutations，并在mutations中操作state中的数据】：我们看一下mutations中JIA(state, value)传递的两个参数
  • 当我们不需要在actions中拿到后台的数据时，可以省略第一步。

省略actions的情况：

子组件.vue【省略后的vc中】

// 组件派发【commit】任务到mutations
this.$store.commit('字符串的事件类型',要传递的数据)
this.$store.commit('JIA',this.n)

store/index.js中的actions和mutations部分【省略后store的mutations中】

  • actions中就不需要写了，跳过actions这一步
const actions ={};
//准备mutations——用于操作数据（state）
const mutations = {
  JIA(state, value){
    console.log('mutations中的JIA被调用了')
    state.sum+= value
  },
};

正常不省略actions的情况：

子组件.vue【不省略actions的vc中】

// 组件派发【dispatch】任务到actions
this.$store.dispatch('字符串的事件类型',要传递的数据)
this.$store.dispatch('jia',this.n)

store/index.js中的actions和mutations部分【store】

//准备actions——用于响应组件中的动作【接收组件派发过来的方法】
const actions = {
	jia(context, value) {
    console.log('actions中的jia被调用了')
    context.commit('JIA',value)
	},
};
//准备mutations——用于操作数据（state）
const mutations = {
  JIA(state, value){
    console.log('mutations中的JIA被调用了')
    state.sum+= value
    console.log(state);
    console.log(value);
  }
};
  • 第一个参数：state

  • 第二个参数：value【this.n】

vuex求和案例展示;

vuex求和案例完整代码：

store/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被调用了')
    // 这里可以访问到state里存储的数据 sum
		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——用于存储数据
//数据，相当于data
const state = {
	sum: 0, //当前的和
};

//创建并暴露store
export default new Vuex.Store({
   // property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)
	actions,
	mutations,
	state,
});

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入vue-resource插件
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),
  // property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)
   // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
  store,
  // 生命周期钩子beforeCreate中模板未解析，且this是vm
  beforeCreate() {
    // this:指的是vm
		Vue.prototype.$bus = this  //安装全局事件总线$bus
	}
})

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>

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() {
      // 组件派发【dispatch】任务到actions,然后在actions中触发mutations中的方法
			this.$store.dispatch('jia',this.n)
		},
		decrement() {
      this.$store.dispatch('jian',this.n)
    }, */
		increment() {
			// 组件派发【dispatch】任务到actions,然后在actions中触发mutations中的方法
			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 scoped>
button {
	margin-left: 10px;
}
select {
	margin-left: 20px;
}
</style>

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

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

相关文章

vue中的.env全局配置

vue中的.env全局配置

关于文件名&#xff1a; .env 全局默认配置文件&#xff0c;不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.production 生产环境下的配置文件 .env文件配置&#xff1a; 我这里要讲的env配置是用启动命令启动项目来配置不同的全局变量 我配置了两…
阅读更多...
十七、Jenkins(centos7系统)运行python3代码

十七、Jenkins(centos7系统)运行python3代码

十七、Jenkins(centos7系统)运行python3代码 source /usr/python/envs/everyday/bin/activate #激活python3 虚拟环境 创建虚拟环境&#xff1a;https://blog.csdn.net/qq_42846555/article/details/131579627 source /usr/python/envs/everyday/bin/activate #激活python3 虚…
阅读更多...
自我介绍，千万别来虚的！

自我介绍，千万别来虚的！

大家好&#xff0c;我是鲏。 已经帮小伙伴改了 500 多份简历了&#xff0c;也发现了一些大家写简历时的共性问题。其中让我印象比较深刻的一个点就是 自我介绍 &#xff0c;基本上所有同学的自我介绍都是这么写的&#xff1a; 读这篇文章的朋友们&#xff0c;你是不是也是这么…
阅读更多...
困于“耐用焦虑”的绿源，还在歧路徘徊？

困于“耐用焦虑”的绿源，还在歧路徘徊？

老牌两轮电动车品牌绿源上市之旅“多歧路”。 日前&#xff0c;北京市市场监督管理局公布北京市电动自行车产品质量监督抽查结果&#xff0c;绿源两款电动自行车因存在问题被点名&#xff0c;充电器和蓄电池、整车质量、控制系统等不符合标准。 而在此前&#xff0c;绿源还向港…
阅读更多...
秒懂算法 | 围棋中的Alpha-Beta剪枝算法

秒懂算法 | 围棋中的Alpha-Beta剪枝算法

01、Alpha-Beta剪枝算法 极小化极大算法会遍历所有的可能性&#xff0c;但是根据经验可以知道&#xff0c;并不是所有的选项都需要进行深入的考虑&#xff0c;存在着某些明显不利的选项&#xff0c;当出现这种选项时就可以换一种思路进行考虑了。Alpha-Beta剪枝算法的出现正是…
阅读更多...
网络投票平台发起投票平台投票吧网络投票平台

网络投票平台发起投票平台投票吧网络投票平台

小程序投票活动如何做&#xff1f;很多企业在运营当中&#xff0c;都会通过投票活动来进行推广&#xff0c;从而达到吸粉、增加用户粘度等效果。而此类投票活动&#xff0c;通过小程序就可以实现&#xff0c;操作简单。 我们现在要以“青春大不同”为主题进行一次投票活动&…
阅读更多...
系统架构设计师-软件工程（3）

系统架构设计师-软件工程（3）

一、软件系统建模 1、结构化建模方法 结构化建模方法是以过程为中心的技术&#xff0c;可用于分析一个现有系统以及定义新系统的业务需求。结构化建模方法所绘制的模型称为数据流图&#xff08;DFD&#xff09;。对于流程较为稳定的系统可考虑结构化建模方法。 2、信息工程建模…
阅读更多...
linux中的目录文件都是用来做什么的

linux中的目录文件都是用来做什么的

1、linux目录系列 - /bin、/sbin目录 我们平时使用的一些命令&#xff0c;是以2进制的格式存放在bin目录下面。例如:cat、chmod、chown、cp、date、find、gzip、kill、ln、ls、mount、mv、ping、pwd、rm、su、tar、vi等。/sbin下存放的是超级用户权限的系统指令。主要放置一些系…
阅读更多...
Python采集双色球历史开奖信息，看看哪个号中奖概率更大

Python采集双色球历史开奖信息，看看哪个号中奖概率更大

目录标题 前言知识点:开发环境:基本流程:代码展示尾语 前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 知识点: 爬虫基本流程 requests的使用 动态数据抓包 开发环境: 解释器: python 3.8 编辑器: pycharm 2022.3 requests >>> pip install requests 第三…
阅读更多...
Jenkins邮件配置报错com.sun.mail.smtp.SMTPSenderFailedException: 501

Jenkins邮件配置报错com.sun.mail.smtp.SMTPSenderFailedException: 501

Jenkins邮件配置&#xff0c;配置完成各种信息之后&#xff0c;“通过发送测试邮件测试配置”点击Test configuration&#xff0c;报错 1、报错信息 com.sun.mail.smtp.SMTPSenderFailedException: 501 mail from address must be same as authorization userat com.sun.mail…
阅读更多...
ARM_异常处理流程_编写软中断swi验证保存现场和恢复现场

ARM_异常处理流程_编写软中断swi验证保存现场和恢复现场

keil .text .global _start _start:1.构建异常向量表b resetb undefb software_interruptb prefetch_abortb data_abortb .b irqb fiq reset:系统上电之后处于svc模式初始化svc模式下的栈指针ldr sp,0x400008002.从SVC模式切换到user模式 msr cpsr,#0xD0mrs r0,cpsrorr r0,r0,…
阅读更多...
C#（五十四）之线程Mutex互斥

C#（五十四）之线程Mutex互斥

Mutex&#xff08;互斥体&#xff09;&#xff1a; 排他性的使用共享资源称为线程间的互斥。 使用Mutex类要比使用monitor类消耗更多的系统资源&#xff0c;但他可以跨越多个应用程序&#xff0c;在多个应用程序间同步。 构造函数 Mutex() 使用默认属性初始化 Mutex 类的新…
阅读更多...
算法与数据结构（六）

算法与数据结构（六）

一、图 一、临接表 表示方法如下&#xff1a; 带权值的无向图的构建&#xff1a; #define MaxInt 32767 // 极大值 #define MVNum 100 // 最大定点数 typedef int ArcType; // 边的权值类型 typedef char VerTexType; // 顶点数据类型//弧(边)的结点结构 st…
阅读更多...
adb: failed to install .\xxxxxx.apk: Failure [INSTALL_FAILED_USER_RESTRICTED

adb: failed to install .\xxxxxx.apk: Failure [INSTALL_FAILED_USER_RESTRICTED

开发者模式和USB调试均已打开&#xff0c;adb安装时报错。看了一下&#xff0c;小米手机还需要开启USB安装才行。 问题已解决
阅读更多...
注册-Springboot整合邮件发送

注册-Springboot整合邮件发送

1.QQ邮箱开启服务 获取授权码 2.在配置文件进行相关配置 spring:mail:host: smtp.qq.comport: 587username: xxxpassword: xxxdefault-encoding: utf-8properties:mail:smtp:connectiontimeout: 5000timeout: 3000writetimeout: 5000 3.读取配置类 /*** 读取yml配置文件里面…
阅读更多...
乞丐版的四层负载均衡,你了解多少?

乞丐版的四层负载均衡,你了解多少?

大家好&#xff0c;我是蓝胖子&#xff0c;做开发的同学应该经常听到过负载均衡的概念&#xff0c;今天我们就来实现一个乞丐版的四层负载均衡&#xff0c;并用它对mysql进行负载均衡测试&#xff0c;通过本篇你可以了解到零拷贝的应用&#xff0c;四层负载均衡的本质以及实践。…
阅读更多...
深入解析Redis的LRU与LFU算法实现

深入解析Redis的LRU与LFU算法实现

作者&#xff1a;vivo 互联网服务器团队 - Luo Jianxin 重点介绍了Redis的LRU与LFU算法实现&#xff0c;并分析总结了两种算法的实现效果以及存在的问题。 一、前言 Redis是一款基于内存的高性能NoSQL数据库&#xff0c;数据都缓存在内存里&#xff0c; 这使得Redis可以每秒轻…
阅读更多...
矩阵的压缩存储

矩阵的压缩存储

本文主要内容&#xff1a;本文主要介绍几种特殊矩阵的压缩存储。特殊矩阵指具有许多相同矩阵元素或零元素&#xff0c;并且这些相同矩阵元素的分布有一定规律性的矩阵&#xff0c;常见的特殊矩阵有对称矩阵、上&#xff08;下&#xff09;三角矩阵、对角矩阵等。压缩存储指为多…
阅读更多...
Vite按需引入自定义组件unplugin-vue-components

Vite按需引入自定义组件unplugin-vue-components

1.安装插件 npm i unplugin-vue-components -D 2.vite.config.ts文件加如下代码 plugins: [vue({reactivityTransform: true}),Components({extensions: [vue, md],include: [/\.vue$/, /\.vue\?vue/, /\.md$/],dts: src/components.d.ts,deep: true, // 搜索子目录dirs: [s…
阅读更多...
MySQL体系结构及各结构的功能

MySQL体系结构及各结构的功能

MySQL体系结构 MySQL的体系结构实际就是MySQL数据库是由那些部分构成&#xff0c;每个部分的具体作用是什么。 Connectors&#xff1a; 用于不同的编程语言连接MySQL数据库&#xff0c;即对外提供的API。 Management Service &Utilities&#xff1a; 用于管理系统&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023