vuex的mapState，mapGetters，mapActions，mapMutations与模块化
2024-04-11 17:12:12
mapState 和mapGetters
- 用于生成计算属性computed
- mapState({“计算属性名”：“State数据”，“xxx”:“xxxx”,…}),返回的是一系列函数
- mapState([‘计算属性和State里数据同名’，“xxxx”,“xxx”,…])此处为简写形式
- mapGetters用法基本一致
通过mapState，mapGetters生成的数据为vuex bindings
import {mapState,mapGetters} from 'vuex' computed:{s(){return 500},...mapState({sum1:"sum"}),...mapState(["sum"]),...mapGetters({bigsum1:"bigsum"}),...mapGetters(["bigsum"]) } ,
mapActions和mapMutations
mapMutations可以生成$store.commit
使用方法为…mapMutations({‘函数名’:‘Mutations里对应函数名字’})(对象形式写法)
…mapMutations([‘chu’])(数组形式写法)
使用时注意函数名要传参
借助mapMutation生成对应方法，方法中会调用commit去联系Mutations
mapActions和mapMutations用法基本相同
借助mapActions生成对应方法，方法中会调用dispatch去联系Actions
...mapMutations({'chu':'CHU'})====>>>>>>chu(){this.$store.commit('CHU',this.number)}mapActions和mapMutations使用时，如果需要传递参数，要在模板中绑定事件是传递好参数，否则参数是事件对象
<template><div ><div>{{sum}}</div><div>{{$store.getters.bigsum}}</div><select v-model.number="number"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="jia(number)">+++++++++</button><button @click="jian(number)">---------</button><button @click="cheng(number)">******</button><button @click="CHU(number)">//</button></div>
</template>
<script>
import {mapState,mapGetters, mapMutations,mapActions} from 'vuex'
export default {name:'Count',
data() {return {number:1}
},
computed:{s(){return 500},...mapState({sum1:"sum"}),...mapState(["sum"]),...mapGetters({bigsum1:"bigsum"}),...mapGetters(["bigsum"])
}
,
methods:{// add(){// this.$store.dispatch('jia',this.number)// },// jian(){// this.$store.dispatch("jian",this.number)// },// cheng(){// this.$store.dispatch("cheng",this.number)// },...mapActions(['jia','jian','cheng']),// CHU(){// this.$store.commit('CHU',this.number)// },...mapMutations(['CHU'])
}
}
</script><style></style>
多组件数据共享
APP Components<template><div ><Count ref='ccc' /><hello/></div>
</template>
<script>
import Count from "./components/Count.vue"
import hello from "./components/hello.vue"
export default {name:"App",components:{Count,hello},mounted() {this.$refs.ccc.$on("hello",()=>{console.log("hello,word");})},}
</script>
<style></style>
HELLO components
<template><div v-if="sum%2"><h1> hello {{sum}}</h1><h1>人员列表</h1><ul><input type="text" v-model="name"><button @click="add">添加</button><li v-for="p in person " :key="p.id">{{p.name}}</li></ul></div>
</template>
<script>
import {mapState} from 'vuex'
export default {data() {return {name:""}},computed:{...mapState(['sum','person'])},methods: {add(){this.$store.commit('add',this.name)this.name=''}},
}
</script>
<style></style>
COUNT component<template><div ><div>{{sum}}</div><div>{{$store.getters.bigsum}}</div><select v-model.number="number"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="jia(number)">+++++++++</button><button @click="jian(number)">---------</button><button @click="cheng(number)">******</button><button @click="CHU(number)">//</button><h1>总人数为{{person.length}}</h1></div>
</template>
<script>
import {mapState,mapGetters, mapMutations,mapActions} from 'vuex'
export default {name:'Count',
data() {return {number:1}
},
computed:{s(){return 500},...mapState({sum1:"sum"}),...mapState(["sum",'person']),...mapGetters({bigsum1:"bigsum"}),...mapGetters(["bigsum"])
}
,
methods:{// add(){// this.$store.dispatch('jia',this.number)// },// jian(){// this.$store.dispatch("jian",this.number)// },// cheng(){// this.$store.dispatch("cheng",this.number)// },...mapActions(['jia','jian','cheng']),// CHU(){// this.$store.commit('CHU',this.number)// },...mapMutations(['CHU'])
}
}
</script><style></style>
main.js
// 该文件是整个项目入口文件
// 引入Vue
import Vue from 'vue'
// 引入App组件，他是所有组件的父组件
import App from './App.vue'
import store from './store'
// 关闭Vue生产提示
Vue.config.productionTip = false
// 创建Vue实例对象
new Vue({// 将App组件放入容器中render: h => h(App),store,beforeCreate(){Vue.prototype.$bus=this},
}).$mount('#app')Store.jsimport Vuex from "vuex"
import Vue from 'vue'
import {nanoid} from 'nanoid'
Vue.use(Vuex)
const actions={jia(context,value){console.log(context);// console.log(value);context.commit("JIA",value)},jian(context,value){context.commit("JIAN",value)},cheng(context,value){setTimeout(() => {context.commit('CHENG',value)}, 3000);},
}
const mutations={JIA(state,value){state.sum +=valueconsole.log(state)},JIAN(state,value){state.sum -=value},CHENG(state,value){state.sum *=value},CHU(state,value){state.sum /=value},add(state,value){state.person.unshift({id:nanoid(),name:value})}}
const state={sum:0,person:[{id:"001",name:"张三"},{id:"002",name:"李四"}
]
}
const getters={bigsum(state){return state.sum*10}
}
export default new Vuex.Store({// ... actions,mutations,state,getters
})vuex模块化
vuex在使用模块化是需要开启命名空间namespace
store.jsimport Vuex from "vuex" import Vue from 'vue' import {nanoid} from 'nanoid' import axios from 'axios' Vue.use(Vuex) const jisuan={namespaced:true,actions:{jia(context,value){console.log(context);// console.log(value);context.commit("JIA",value)},jian(context,value){context.commit("JIAN",value)},cheng(context,value){setTimeout(() => {context.commit('CHENG',value)}, 3000);},},mutations:{JIA(state,value){state.sum +=valueconsole.log(state)},JIAN(state,value){state.sum -=value},CHENG(state,value){state.sum *=value},CHU(state,value){state.sum /=value},},state:{sum:0},getters:{bigsum(state){return state.sum*10}} } const renyuan={namespaced:true,mutations:{add(state,value){state.person.unshift({id:nanoid(),name:value})} },state:{person:[{id:"001",name:"张三"},{id:"002",name:"李四"} ]} } const qingqiu={namespaced:true,state:{person:[]},actions:{no1(context,value){axios.get(`https://api.github.com/search/users?q=`+value).then(response => {console.log("成功",response.data.items);context.commit("NO1",response.data.items)},error => {console.log("失败",error.message);})}},mutations:{NO1(state,value){state.person.unshift(value)}} }export default new Vuex.Store({// ... modules:{jisuan,renyuan,qingqiu} })count component <template><div ><div>{{sum}}</div><div>{{bigsum}}</div><select v-model.number="number"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="jia(number)">+++++++++</button><button @click="jian(number)">---------</button><button @click="cheng(number)">******</button><button @click="CHU(number)">//</button><h1>总人数为{{person.length}}</h1></div> </template> <script> import {mapState,mapGetters, mapMutations,mapActions} from 'vuex' export default {name:'Count', data() {return {number:1} }, computed:{s(){return 500},...mapState('jisuan',["sum"]),...mapState("renyuan",['person']),...mapGetters('jisuan',["bigsum"]) } , methods:{// add(){// this.$store.dispatch('jia',this.number)// },// jian(){// this.$store.dispatch("jian",this.number)// },// cheng(){// this.$store.dispatch("cheng",this.number)// },...mapActions('jisuan',['jia','jian','cheng']),// CHU(){// this.$store.commit('CHU',this.number)// },...mapMutations('jisuan',['CHU']) }, mounted(){console.log(this.$store) } } </script><style></style>person component <template><div>----------------------------------<div><input type="text" v-model="name"><button @click="no1(name)">按钮</button></div>----------------------------------</div> </template><script> import {mapActions} from 'vuex' export default {data() {return {name:"",} }, methods:{...mapActions("qingqiu",['no1']), } } </script><style></style>hello components <template><div v-if="sum%2"><h1> hello {{sum}}</h1><h1>人员列表</h1><ul><input type="text" v-model="name"><button @click="add">添加</button><li v-for="p in person " :key="p.id">{{p.name}}</li></ul></div> </template> <script> import {mapState} from 'vuex' export default {data() {return {name:""}},computed:{...mapState('jisuan',['sum']),...mapState('renyuan',["person"])},methods: {add(){this.$store.commit('renyuan/add',this.name)this.name=''}}, } </script> <style></style>APP组件<template><div ><Count ref='ccc' /><hello/><person/></div> </template> <script> import person from './components/person.vue' import Count from "./components/Count.vue" import hello from "./components/hello.vue" export default {name:"App",components:{Count,hello,person},mounted() {this.$refs.ccc.$on("hello",()=>{console.log("hello,word");})},} </script> <style></style>
vuex的mapState，mapGetters，mapActions，mapMutations与模块化相关推荐
- Vue教程5【vuex】getters,mapState,mapGetters,mapActions,mapMutations,模块化namespace
vuex 什么时候需要使用? 状态(数据)共享! vuex工作原理 搭建vuex环境 创建文件 src/store/index.js//全局安装[--save生产环境] npm install -g ...
- [vue] Vuex中四个map方法的使用 mapState mapGetters mapActions mapMutations
1. mapState方法: 用于帮助我们映射state中的数据为计算属性 computed: {//借助mapState生成计算属性:sum.school.subject(对象写法)...mapSt ...
- vuex里mapState,mapGetters使用详解
一.引用和搭建 以下四步骤 vue项目以及vuex引用,在新版vue-cli V3 以上时,可以直接选择创建带有 vuex.详见我的另一个博客 1.初始化并创建一个项目 vue init webpac ...
- vuex进阶 mapState、mapGetters、mapMutations、mapActions
一.state 1.1 引入vuex 以后,我们需要在state中定义变量,类似于vue中的data,通过state来存放状态 import Vue from 'vue' import Vuex fr ...
- Vuex--mapState, mapGetters, mapActions, mapMutations--使用/教程/实例
原文网址:Vuex--mapState, mapGetters, mapActions, mapMutations--使用/教程/实例_IT利刃出鞘的博客-CSDN博客 简介 说明 本文用示例介绍Vu ...
- VUE学习(二十一)、Vuex（getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码）
VUE学习(二十一).Vuex(getters.mapState与mapGetters.mapMutations与mapActions.多组件共享数据.模块化编码) 一.Vuex普通实现求和案例 演示 ...
- vue——vuex mapState,mapGetters,mapMutations,mapActions
当多次获取state中的数据时会出现大量的 $store.state.属性名 造成代码的冗余同时也很麻烦.就可使用 mapState(引用时使用的名称,'state中的属性名') 或 mapState ...
- Vue3 直接使用Vuex的mapState和mapGetters时报错的分析及解决方案
Vuex 提供了 mapState.mapGetters.mapActions 和 mapMutations 四个函数,其返回结果分别是 mappedState,mappedGetter,mapped ...
- Vuex实践-mapState和mapGetters
一.前言 本文章是vuex系列的最后一篇,主要总结的是如何使用mapState和mapGetters访问vuex中的state和getters. 二.多个模块中mapState和mapGetters的 ...
最新文章
- Windows Workflow Beta2 HOL学习笔记（三）：使用IfElse Activity，声明条件和自定义活动...
- 给ADAS泼冷水？不，是客观评价
- 第三次学JAVA再学不好就吃翔(part75)--集合概述
- 云计算机具体应用场景,云计算的定义、类型及应用场景
- python-数据类型-整数类型与浮点数据类型
- IT职场健康杀手与应对宝典 （虽然是IT职场，可是对于常上网的ggmm也是很有用的）...
- 基于51最小系统的超声波测距
- 位数（digits）的处理
- 关于Acess 图片存为ole类型,数据集合显示
- lisp 计算三点的夹角_平面三点计算夹角
- reviewboard升级
- 学校人脸识别门禁功能介绍
- 数商云DMS渠道商城系统全渠道营销场景应用举例，赋能日化行业增强渠道掌控力
- 成都Uber优步司机奖励政策（2月22日）
- iNav飞控AOCODARC-F7MINI固件编译
- linux文件权限数字754,linux555、644、666、755、777权限详解数字代表什么意思
- matlab eqs,EQS(奔驰eqs什么时候上市)
- Java常用设计模式(一)
- ISP——Gamma Correction
- oracle中diag,Oracle diag目录下面的大量trace trc文件