【笔记整理】vuex介绍和原理以及mapState与mapGetters、mapActions与mapMutations

已于 2022-07-30 17:15:11 修改
阅读量595 收藏 4
点赞数 1
分类专栏： vue 前端 文章标签： vue.js 前端 javascript
于 2022-07-30 17:14:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fangyuan__/article/details/126074883
版权
前端 同时被 2 个专栏收录
49 篇文章 2 订阅
订阅专栏
vue
25 篇文章 0 订阅
订阅专栏

vuex

理解Vuex

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

在这里插入图片描述

在这里插入图片描述

什么时候使用Vuex

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

Vuex工作原理图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pRcgr7Nw-1659172169354)(img/11a966479bad6de2bc521d30b90d391f.png)]

Vuex的基本使用

  1. 初始化数据state，配置actions、mutations，操作文件store.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

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

2.组件中读取vuex中的数据：$store.state.sum

3.组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

Vuex编写加减案例

src/components/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('ADD',this.n)
			},
			decrement(){
				this.$store.commit('SUBTRACT',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('addOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('addWait',this.n)
			},
		},
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

src/store/index.js:

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {
    addOdd(context,value){
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{
			context.commit('ADD',value)
		},500)
    },
}
//准备mutations对象——修改state中的数据
const mutations = {
    ADD(state,value){
        state.sum += value
    },
    SUBTRACT(state,value){
        state.sum -= value
    }
}
//准备state对象——保存具体的数据
const state = {
    sum:0 //当前的和
}
   
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

getters配置项

getters配置项的使用：

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工
  2. 在store.js中追加getters配置
...
const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

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

​ 3.组件中读取数据：$store.getters.bigSum

四个map方法的使用（mapState与mapGetters、mapActions与mapMutations）

参考文章

介绍

mapState方法：用于帮助我们映射state中的数据（查state）

computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性：sum、school、subject（数组写法），前提是两个名字一致
    ...mapState(['sum','school','subject']),
},

mapGetters方法：用于帮助我们映射getters中的数据（获取state中的数据加工后的数据）

computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性：bigSum（数组写法），前提是两个名字一致
    ...mapGetters(['bigSum'])
},

mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成：incrementOdd、incrementWait（数组形式），前提是两个名字一致
    ...mapActions(['jiaOdd','jiaWait'])
}

mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数（提交）

methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成：JIA、JIAN（数组形式），前提是两个名字一致
    ...mapMutations(['JIA','JIAN']),
}

mapState与mapGetters

src/store/index.js:

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {
    addOdd(context,value){
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{
			context.commit('ADD',value)
		},500)
    },
}
//准备mutations对象——修改state中的数据
const mutations = {
    ADD(state,value){
        state.sum += value
    },
    SUBTRACT(state,value){
        state.sum -= value
    }
}
//准备state对象——保存具体的数据
const state = {
    sum:0, //当前的和
    name:'JOJO',
    school:'尚硅谷',
}
//准备getters对象——用于将state中的数据进行加工
const getters = {
    bigSum(){
        return state.sum * 10
    }
}
   
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

src/components/Count.vue:

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和的10倍为：{{bigSum}}</h3>
		<h3>我是{{name}}，我在{{school}}学习</h3>
		<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>
	import {mapState,mapGetters} from 'vuex'

	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			increment(){
				this.$store.commit('ADD',this.n)
			},
			decrement(){
				this.$store.commit('SUBTRACT',this.n)
			},
			incrementOdd(){
				this.$store.dispatch('addOdd',this.n)
			},
			incrementWait(){
				this.$store.dispatch('addWait',this.n)
			},
		},
		computed:{		
			// 借助mapState生成计算属性（数组写法）
			// ...mapState(['sum','school','name']),
			// 借助mapState生成计算属性（对象写法）
			...mapState({sum:'sum',school:'school',name:'name'}),

			...mapGetters(['bigSum'])
		}
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

mapActions与mapMutations

src/components/Count.vue:

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和的10倍为：{{bigSum}}</h3>
		<h3>我是{{name}}，我在{{school}}学习</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			// 借助mapActions生成：increment、decrement（对象形式）
			...mapMutations({increment:'ADD',decrement:'SUBTRACT'}),

			// 借助mapActions生成：incrementOdd、incrementWait（对象形式）
			...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})
		},
		computed:{		
			// 借助mapState生成计算属性（数组写法）
			// ...mapState(['sum','school','name']),
			// 借助mapState生成计算属性（对象写法）
			...mapState({sum:'sum',school:'school',name:'name'}),

			...mapGetters(['bigSum'])
		}
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

多组件共享数据

src/App.vue:

<template>
	<div class="container">
		<Count/>
		<hr/>
		<Person/>
	</div>
</template>

<script>
	import Count from './components/Count'
	import Person from './components/Person'

	export default {
		name:'App',
		components:{Count,Person}
	}
</script>

src/store/index.js:

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作
const actions = {
    addOdd(context,value){
        console.log("actions中的addOdd被调用了")
        if(context.state.sum % 2){
            context.commit('ADD',value)
        }
    },
    addWait(context,value){
        console.log("actions中的addWait被调用了")
        setTimeout(()=>{
			context.commit('ADD',value)
		},500)
    },
}
//准备mutations对象——修改state中的数据
const mutations = {
    ADD(state,value){
        state.sum += value
    },
    SUBTRACT(state,value){
        state.sum -= value
    },
	ADD_PERSON(state,value){
		console.log('mutations中的ADD_PERSON被调用了')
		state.personList.unshift(value)
	}
}
//准备state对象——保存具体的数据
const state = {
    sum:0, //当前的和
    name:'JOJO',
    school:'尚硅谷',
    personList:[
		{id:'001',name:'JOJO'}
	]
}
//准备getters对象——用于将state中的数据进行加工
const getters = {
    bigSum(){
        return state.sum * 10
    }
}
   
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

src/components/Count.vue:

<template>
	<div>
		<h1>当前求和为：{{sum}}</h1>
		<h3>当前求和的10倍为：{{bigSum}}</h3>
		<h3>我是{{name}}，我在{{school}}学习</h3>
		<h3 style="color:red">Person组件的总人数是：{{personList.length}}</h3>
		<select v-model.number="n">
			<option value="1">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
		</select>
		<button @click="increment(n)">+</button>
		<button @click="decrement(n)">-</button>
		<button @click="incrementOdd(n)">当前求和为奇数再加</button>
		<button @click="incrementWait(n)">等一等再加</button>
	</div>
</template>

<script>
	import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

	export default {
		name:'Count',
		data() {
			return {
				n:1, //用户选择的数字
			}
		},
		methods: {
			...mapMutations({increment:'ADD',decrement:'SUBTRACT'}),
			...mapActions({incrementOdd:'addOdd',incrementWait:'addWait'})
		},
		computed:{
			...mapState(['sum','school','name','personList']),,
			...mapGetters(['bigSum'])
		}
	}
</script>

<style>
	button{
		margin-left: 5px;
	}
</style>

src/components/Person.vue:

<template>
	<div>
		<h1>人员列表</h1>
		<h3 style="color:red">Count组件求和为：{{sum}}</h3>
		<input type="text" placeholder="请输入名字" v-model="name">
		<button @click="add">添加</button>
		<ul>
			<li v-for="p in personList" :key="p.id">{{p.name}}</li>
		</ul>
	</div>
</template>

<script>
	import {nanoid} from 'nanoid'
	export default {
		name:'Person',
		data() {
			return {
				name:''
			}
		},
		computed:{
			personList(){
				return this.$store.state.personList
			},
			sum(){
				return this.$store.state.sum
			}
		},
		methods: {
			add(){
				const personObj = {id:nanoid(),name:this.name}
				this.$store.commit('ADD_PERSON',personObj)
				this.name = ''
			}
		}
	}
</script>

fangyuan__
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vuex state及mapState的基础用法详解
08-27
主要介绍了vuex state及mapState的基础用法详解,本文通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友跟随
Vuex实践-mapState和mapGetters
01-14 4294
一.前言 　　本文章是vuex系列的最后一篇，主要总结的是如何使用mapState和mapGetters访问vuex中的state和getters。 二.多个模块中mapState和mapGetters的使用 　　上一篇文章《Vuex实践（中）》里面我们总结的就是多模块的内容，所以关于store.js、moduleA.js和moduleB.js的代码保持不变。 　　在此为了方便观看，我将这...
mapState mapGetters
HeX_7的博客
06-23 568
求和案例_mapState mapGetters mapMutations mapActions
Vuex中的辅助函数:mapState,mapGetters,mapMutations,mapActions
huanlesyaya的博客
12-05 430
通过前面四篇，我们已经讲完了Vuex中的四个核心概念，分别是state,getters,mutations,actions掌握了这四个概念，我们基本可以应对一些中小项目了。Vuex中还有最后一个概念是modules,主要是为了针对一些大型复杂项目，避免store里面的数据太多，难以管理而设计存在的，modules比较难，所以本篇先不做详细讲述，会把他放在最后一篇来做解释 今天主要就是想跟大家分享下...
vuex学习与实践——mapState、getter、mapGetters
weixin_30491641的博客
04-16 78
1、mapState辅助函数 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。 （1）首先需要在组件中引用才可以使用 import { mapState } from 'vuex' （2）mapState使用前后对比： // 不使用ma...
vuex的使用之mapMutations
weixin_44794123的博客
07-05 9174
vuex中mapMutations的使用。
vuex的使用之mapActions
热门推荐
weixin_44794123的博客
06-09 1万+
vuex中mapActions的使用
vuex中mapActions的概念及用法
jiangjunyuan168的博客
09-21 1万+
一般情况下我们会在组件中使用 this.$store.dispatch() 来触发 action ，想要调用多少个 action 就需要调用多少次 dispatch() ，而使用 mapActions 的话只需要将组件中往 mapActions 中传入与 action 同名的函数，然后调用这些函数即可触发对应的action。了解了 mapActions 大概是用来干什么的之后，下面来介绍一下 mapActions 的具体用法。简单来说 mapActions 就是。
...mapstate和...mapgetters的区别
qq_51847461的博客
12-09 593
mapGetters则可以将Vuex store中的getters映射到组件的计算属性中，使得我们可以直接在组件中使用这些getters，而不需要通过this.$store.getters.xxx来访问。...mapgetters使用格式是...mapgetters([])映射vuex中getter中的方法到组件的computed中；...mapstate使用格式是...mapstate({}),调用vuex中state中的数据，则第一个参数是模块名称；
Vuex的使用（七）——mapMutations的用法
讨厌走开啦
09-08 7535
参考文档：https://vuex.vuejs.org/zh/guide/ mapMutations的定义可以对标mapState和mapGetters，就不赘述了，下面直接上示例代码。首先在Vuex中补充mutations的其他几种用法（修改文件路径为src\store\index.js），代码如下： import Vue from “vue”; import Vuex from “vuex”; Vue.use(Vuex); const store = new Vuex.Store({ state: {
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
11-29
一、介绍 vuex里面的四大金刚：State， Mutations，Actions，Getters （上次记得关于vuex笔记 //www.jb51.net/article/138229.htm,是一个简单的应用；这是一些简单的vue的小组件方法： //...
『计算机科学与技术（本科）』自考笔记汇总：04741 计算机网络原理
最新发布
03-05
『计算机科学与技术（本科）』自考笔记汇总：04741 计算机网络原理
07025 数据通信与网络 笔记整理 202107.pdf
07-10
江苏自考 07025数据通信与网络知识点整理
《微机原理与接口技术》复习笔记.pdf
02-20
《微机原理与接口技术》复习笔记，其中包含知识点笔记以及相关例题
《管理学》原理与方法(第5版)笔记
04-18
《管理学》原理与方法(第5版)笔记
vuex里mapState,mapGetters使用详解
gabby____的博客
05-14 3914
这次给大家带来vuex里mapState,mapGetters使用详解，vuex里mapState,mapGetters使用的注意事项有哪些，下面就是实战案例，一起来看一下。 一、介绍 vuex里面的四大金刚：State， Mutations，Actions，Getters （上次记得关于vuex笔记 http://www.jb51.net/article/138229.htm,是一个简...
Vuex入门(六)——mapState, mapGetters, mapMutations, mapActions全网最全详解终结篇(带源码)
m0_49714202的博客
03-15 1761
目录 知识不足的地方可以点击查看哦~~~ Vuex入门(一)—— state,mapState,…mapState对象展开符详解 Vuex入门(二)—— mutations详解 Vuex入门(三)—— getters,getters,…getters对象展开符详解 Vuex入门(四)—— action和…mapActions详解 Vuex入门(五)—— 封装module全网最全详解(带源码) Vuex入门(六)——mapState, mapGetters, mapMutations, mapAction
VueX mapState、mapGetters、mapActions和mapMutaions 的使用
XunLin233的博客
11-04 326
如果我们想要读取VueX中的State数据的Getters数据时，需要使用$store.state.数据名 和 $store.getters.数据名。当我们State和getters中的数据多了以后，书写会很麻烦：如果我们想要使用方便可以配置计算属性来简化书写：但是这样配置计算属性过于繁琐，为了便于书写，VueX为我们提供了mapState和mapGetters来方便我们书写。
vuex中...mapstate和...mapgetters的区别
m18697787579的博客
03-01 2533
mapstate：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性 mapGetters： 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性 ...
数据结构与算法第ba章笔记整理
09-02
数据结构与算法是计算机科学的基础和核心领域之一，第ba章介绍了数据结构的相关内容。 本章主要包括以下几个方面的内容： 1. 线性结构：线性结构是指数据元素之间存在一对一的关系，包括线性表、栈和队列。线性表是最基本的数据结构之一，它分为顺序表和链表两种形式。顺序表使用数组实现，插入和删除操作相对低效。链表使用指针实现，插入和删除操作较为灵活。 2. 树结构：树结构是一种层次结构，由节点和边组成。常见的树结构有二叉树、二叉搜索树和平衡二叉树等。二叉树中每个节点最多有两个子节点，二叉搜索树中左子节点的值小于根节点，右子节点的值大于根节点，查找效率较高。平衡二叉树是一种保持左右子树高度差不大于1的二叉搜索树。 3. 图结构：图结构是由节点和边组成的非线性结构。图分为有向图和无向图。图的表示方法有邻接矩阵和邻接表两种。深度优先搜索和广度优先搜索是图的常用遍历方法，可用于寻找路径、连通分量等问题。 4. 排序算法：排序算法是对一组无序数据进行按照某个规则进行有序排列的算法。第ba章介绍了常见的排序算法，包括冒泡排序、插入排序、选择排序、归并排序、快速排序等。每种排序算法的时间复杂度和空间复杂度不同，选择合适的排序算法可以提高性能。 5. 查找算法：查找算法是在一组数据中搜索某个特定元素的算法。第ba章介绍了顺序查找、二分查找和哈希查找等常见的查找算法。二分查找是在有序数组中应用最广泛的查找算法，通过不断缩小查找范围来快速定位目标值。 通过学习这些内容，我们可以了解不同数据结构的特点和应用场景，以及常见的排序和查找算法。掌握好这些知识，对于解决实际问题和提高程序效率都有很大帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值