vuex 基本用法、兄弟组件通信,参数传递
vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值,需要先将值传给父组件,再传给子组件,异常麻烦。
vuex大概思路:a=new Vue(),发射数据‘msg’:a.$emit('evt','msg'),接收数据msg:a.$on('evt',msg=>this.msg=msg) ,代码在mounted中。
vuex使用:
store端 :
一共有4大块,state,actions,mutations、getters
//一般单独js文件写数据
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: { //state数据跟根组件data写法一模一样。也是储存数据的。
a: 1,
b: '33'
},
actions: { //actions里面全是方法,与mutations区别只有这儿的方法可以使用异步操作,mutations方法使用异步,调试会混乱。
fn({ commit, state }, n) { //{{commit,state}}写法是es6语法,简写,state是默认传参,就是上面的state,就算写aaa也是指向state。n为组件传过来的参数。 new Promise((resolve, reject) => { //这儿模拟延迟,不模拟写 state.a += n;commit('add')代替 setTimeout(() => resolve(state.a += n), 1000) }).then(commit('add')) //fn执行结束后,再执行mutations 中的add(){}。必须如此,否则,组件使用时收不到数据。 },
msgFn({ commit, state }, msg) {
state.b = msg
commit('add')
} },
mutations: { //此处的function是同步操作的。其他的都跟上面一样。
add(state,n) {} //参数跟actions一样。
},
getters: { // 这个跟组件的computed差不多,接收state作为参数,不接受组件传参数。需要return值。 c(state) {
state.a += 1
return state.a--
}, }
})
组件端使用:
使用的时候后,可以直接挂载后使用,挂载后就变成了自己组件的数据或者方法了。:
挂载点:computed:
mapState(['a']) 或者使用:this.$store.state 获取state对象。
mapGetters([ 'doneTodosCount', 'anotherGetter',]) 或者使用:this.$store.getters 获取getters对象。
挂载点:methods:
mapMutations(['mutationName'])
mapActions([ 'actionName',])
Mutations使用:
使用方法1:无需挂载,直接使用,可在自定义methods,watch,等等函数中使用。
this.$store.commit('mutationName',n) 使用mutiationName函数并传递参数n,传过去自动变为是第二位参数,第一位参数一定是state。
使用方法2:需挂载
@click='mutationName(5)', 这个5 传过去会自动变成为给函数第二个参数,第一个参数必须是state。
Actions使用:
使用方法一:无需挂载,直接使用。
this.$store.dispatch('actionA',msg).then(() => {}) 传参上同。这儿可以用then()
使用方法2:需挂载
@click='actionA(msg).then(fn)' 使用actionA函数,并且传msg参数过去。参数上同
<template>
<div id="app">
<button @click='fn(4)'>state.a+4</button> <!--使用vuex传过来的函数fn,并且传参4-->
<div>
现在state.a:{{a}}
<br>
现在getters.c(): {{c}} 注:c=state.a+1
<br>
<hr>
<aaa ></aaa>
<hr>
<bbb></bbb>
</div>
</div>
</template> <script>
import {mapGetters,mapActions,mapMutations,mapState} from 'vuex'; //引入辅助函数,拿去挂载后就可以用了。
const {fn,msgFn}=mapActions(['fn','msgFn']) //对象展开运算符...测试无法用,这儿用解构代替。
const {a,b}=mapState(['a','b']) //解构目的在于:挂载方式如 methods:MapActions(['xxx']),自己还想在本地写方法,怎么办?
const {c}=mapGetters(['c']) //于是将外面的花括号去掉,添加到methods:{fn,msgFn,myFn}中,其中myFn为本地添加的。
export default {
computed:{
a,b,c
},
methods:{
fn,
},
components:{
aaa:{ //传递input输入的msg給state.b ,调用vuex里的msgFn,将msg当做参数传过去,msgFn的代码就是将state.b=msg。
template:`<div><h2>我是子组件aaa</h2><p >{{c}}</p><br>state.b=input值 :<input type="text" v-model='msg'></div>`,
computed:mapGetters(['c']),
data(){
return {
msg:''
}
},
methods:{
fn,
msgFn,
fn1(){
console.log(222)
}
}
},
bbb:{ //兄弟组件能够显示state.b的值。
template:`<div><h2>我是子组件的兄弟组件bbb</h2><br>我收到aaa的输入数据,利用state.b显示出来 :</bbbbr><span>{{b}}</span></div>`,
computed:mapState(['b'])
}
}
}
main.js中,需要将vuex.store实例挂载到根组件中。
import Vue from 'vue'
import App from './App.vue'
import store from './store.js' new Vue({
store,
el: '#app',
render: h => h(App)
})
vuex 基本用法、兄弟组件通信,参数传递的更多相关文章
- Vue 兄弟组件通信(不使用Vuex)
Vue 兄弟组件通信(不使用Vuex) 项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下 ...
- vue 组件之间互相传值:兄弟组件通信
vue 组件之间互相传值:兄弟组件通信我们在项目中经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入 vuex 轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入 vuex ...
- Vue兄弟组件通信
Vue兄弟组件通信之借助中央事件总线 下载链接:https://www.yinxiangit.com 其实要实现兄弟组件通信,就算是通过父子组件通信的方式也是可以达到的,如 子 ——>父——&g ...
- Vue2不使用Vuex如何实现兄弟组件间的通信
在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...
- vue2.0s中eventBus实现兄弟组件通信
在vue1.0中,组件之间的通信主要通过vm.$dispatch沿着父链向上传播和用vm.$broadcast向下广播来实现.然而在vue2.0中,已经废除了这种用法. vuex加入后,对组件之间的通 ...
- vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...
- vue2.0 父子组件通信 兄弟组件通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
- vue组件之间的通信, 父子组件通信,兄弟组件通信
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...
- 关于Vue 兄弟组件通信
最近项目中遇到希望在操作路由组件里面内容的时候可以影响共用组件Header组件(这个其实就是他的兄弟组件)的操作. 意思就是 router-view指向的router来影响Header组件的信息 首 ...
随机推荐
- centOS 搭建pipelineDB docs
#下载docs git clone https://github.com/pipelinedb/docs.git #安装python-sphinx &python-dev yum instal ...
- 程序员的自我救赎---3.1:理解Oauth2.0
<前言> (一) Winner2.0 框架基础分析 (二)PLSQL报表系统 (三)SSO单点登录 (四) 短信中心与消息中心 (五)钱包系统 (六)GPU支付中心 (七)权限系统 (八) ...
- Android IntentService使用介绍以及源码解析
版权声明:本文出自汪磊的博客,转载请务必注明出处. 一.IntentService概述及使用举例 IntentService内部实现机制用到了HandlerThread,如果对HandlerThrea ...
- 是否是有效的dom节点--轮子代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- 微服务架构之RPC-client序列化细节
通过上篇文章的介绍,知道了要实施微服务,首先要搞定RPC框架,RPC框架的职责要向[调用方]和[服务提供方]屏蔽各种复杂性: (1)让调用方感觉就像调用本地函数一样 (2)让服务提供方感觉就像实现一个 ...
- java类的继承的一些细节
类的继承是java面向对象体系的一个重要方面(封装.继承.多态),对于java类的继承,需要注意如下细节. 1.构造函数. 如果一个类没有任何构造函数,系统会默认分配一个无参的构造函数给它,这个构造函 ...
- Elasticsearch短语搜索——match_phrase
找出一个属性中的独立单词是没有问题的,但有时候想要精确匹配一系列单词或者短语 . 比如, 我们想执行这样一个查询,仅匹配同时包含 "rock" 和 "climbing&q ...
- 「mysql优化专题」优化之路高级进阶——表的设计及优化(6)
正文:表的设计及优化(真技术文) 优化①:创建规范化表,消除数据冗余 数据库范式是确保数据库结构合理,满足各种查询需要.避免数据库操作异常的数据库设计方式.满足范式要求的表,称为规范化表,范式产生于2 ...
- IDEA Translation插件中有道智云(有道翻译)应用ID,密钥申请教程
登录链接 该登录登录,该注册注册(信息随意填写) 自然语言翻译=>翻译实例=>创建实例(信息随意填写) QQ截图20170701231552.png 应用管理=>我的应用=>创 ...
- 《深入理解Java虚拟机:JVM高级特性与最佳实践》【PDF】下载
<深入理解Java虚拟机:JVM高级特性与最佳实践>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062566 内容简介 作为一位 ...