vuex最简单、最直白、最全的入门文档
前言
我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据回传给父组件。
父组件代码:
<template>
<div>
<a href="javascript:;" @click="dialogshow = true">点击</a>
<common-dialog :show.sync="dialogshow"></common-dialog>
弹框是否显示:{{dialogshow}}
</div>
</template> <script>
import commondialog from '@/components/dialog'
export default {
name: 'parent',
components:{
'common-dialog':commondialog
},
data () {
return {
dialogshow:false
}
},
methods:{ }
}
</script>
子组件代码:
<template>
<el-dialog :visible.sync="elDialogShow" title="提示">
<span>这是一段弹框信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="elDialogShow = false">取 消</el-button>
<el-button type="primary" @click="elDialogShow = false">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name:'children',
props:['show'],
computed:{
elDialogShow:{
get(){
return this.show
},
set(value){
this.$emit('update:show',value)
}
}
},
data() {
return { };
}
}
</script>
感觉这样挺麻烦,父组件通过设置子组件的属性(props)来向子组件传递数据,而父组件想获得子组件的数据,得向子组件注册事件,在子组件触发这个事件再把数据传递出来。一句话总结起来就是,props 向下传递数据,事件向上传递数据。
如果使用vuex,像下面这种方式就很简单:
<!--父组件-->
<template>
<div>
<a href="javascript:;" @click="$store.state.show = true">点击</a>
<common-dialog></common-dialog>
弹框是否显示:{{$store.state.show}}
</div>
</template> <!--子组件-->
<el-dialog :visible.sync="$store.state.show" title="提示">
<!--其它代码省略-->
</el-dialog>
当然,在这儿举这个例子似乎不恰当,只是为了说明vuex使用方便。
安装使用vuex
安装:
npm install vuex --save
在main.js添加配置:
import vuex from 'vuex'
Vue.use(vuex)
var store = new vuex.Store({
state:{
show:false
}
})
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
然后子组件代码就能有效运行了。
<template>
<el-dialog :visible.sync="$store.state.show" title="提示">
<span>这是一段弹框信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="$store.state.show = false">取 消</el-button>
<el-button type="primary" @click="$store.state.show = false">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name:'children',
data() {
return { };
}
}
</script>
modules
前面我们把store对象写到了main.js中,为了项目的好管理,我们可以新建一个store文件夹放于src文件夹下,在store文件夹下新建index.js,代码如下:
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex); export default new vuex.Store({
state:{
show:false
}
})
那么对应的main.js得改成如下:
//vuex
import store from './store' new Vue({
el: '#app',
router,
store,//使用store
template: '<App/>',
components: { App }
})
这样虽然结构看着清晰了,但是如果多个模块,不同类型(比如用户基本信息,用户购物车等)放到同一个state下面不好管理,这就用modules。
那么store文件夹下的index.js就变成了这样,假如我们有app与user模块:
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app' //app模块数据
import user from './modules/user' //用户模块数据
import getters from './getters' Vue.use(Vuex) const store = new Vuex.Store({
modules: {
app,
user
},
getters
}) export default store
getters
这儿说明下,上面我在Store实例对象中引入了getters,是为了后面页面可以直接调用经常用到的状态信息,也就相当于vue实例里面的computed计算属性,通过$store.getters.show方式得到相关数据,即通过上面的getters引入知道,是直接在store文件夹下创建了一个getters.js,代码如下:
const getters = {
show: state => state.app.show
}
export default getters
当然这个getters也可以放到具体的模块中,比如放到app模块中,官网的这块代码结构如下:
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
} const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
} const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
}) store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
我们从index.js中看到,我们在store文件夹下创建了一个modules文件夹,也就是在该文件夹下放各个需要区分的状态模块,比如user.js,app.js等。
结构如下图:
上面我们通过$store.getters.show方式(即相当于通过计算属性)获得show的值,当然也可以通过$store.state.app.show获得。
app.js代码:
export default {
state:{
show:false
}
}
mutations
在我们点击按钮出现弹框或者点击弹框中的关闭按钮,需要修改app模块中的show的状态,这时候就需要通过mutations进行修改数据(同步操作)。
我们需要在app.js模块代码:
export default {
state:{
show:false
}, mutations:{
SET_DIALOG_STATE:(state,val) => { //改变弹框是否显示的状态
state.show = val
}
}
}
父组件:
<template>
<div>
<a href="javascript:;" @click="$store.commit('SET_DIALOG_STATE',true)">点击</a>
<common-dialog></common-dialog>
弹框是否显示:{{$store.state.app.show}}
</div>
</template> <script>
import commondialog from '@/components/dialog'
export default {
name: 'parent',
components:{
'common-dialog':commondialog
},
data () {
return { }
}, methods:{ }
}
</script>
子组件:
<template>
<el-dialog :visible.sync="$store.getters.show" title="提示">
<span>这是一段弹框信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="$store.commit('SET_DIALOG_STATE',false)">取 消</el-button>
<el-button type="primary" @click="$store.commit('SET_DIALOG_STATE',false)">确 定</el-button>
</span>
</el-dialog>
</template>
这儿就是用到了$store.commit('SET_DIALOG_STATE',false)来触发mutations中的SET_DIALOG_STATE方法来改变状态值。
需要注意的是:
- mutations中的方法是不分模块的,比如你在app.js中定义了SET_DIALOG_STATE这个方法,也在user.js中定义了SET_DIALOG_STATE这个方法,那么在任一组件中调用$store.commit('SET_DIALOG_STATE',false),会执行所有的SET_DIALOG_STATE方法。
- mutations里的操作必须是同步的。
如果在mutations 里执行异步操作会发生什么事情 , 实际上并不会发生什么奇怪的事情 , 只是官方推荐 , 不要在 mutations 里执行异步操作而已。
actions
我们在上面的app.js中通过mutations改变了一个状态,那么如果需要改变多个状态的值呢,需要执行mutations中定义的多个方法(也就是说需要调用多次$store.commit()方法),那么就需要actions
那么app.js代码如需要改成如下:
export default {
state:{
show:false
},
getters:{
showState(state){
return state.show
}
},
mutations:{
SET_DIALOG_STATE:(state,val) => { //改变弹框是否显示的状态
state.show = val
}
},
actions:{
set_dialog_state({commit,state},dialogVal){ //对象解构
commit('SET_DIALOG_STATE',dialogVal)
//commit('mutations其它方法','其它方法需要改变的值')
} //等价于下面的:
/*
set_dialog_state(context,dialogVal){
context.commit('SET_DIALOG_STATE',dialogVal)
context.commit('mutations其它方法','其它方法需要改变的值')
}
*/
}
}
那么父组件的调用方式就需要用$store.dispatch()方法,父组件代码如下:
<template>
<div>
<a href="javascript:;" @click="$store.dispatch('set_dialog_state',true)">点击</a>
<common-dialog></common-dialog>
弹框是否显示:{{$store.state.app.show}}
</div>
</template> <script>
import commondialog from '@/components/dialog'
export default {
name: 'parent',
components:{
'common-dialog':commondialog
},
data () {
return { }
}, methods:{ }
}
</script>
子组件的代码:
<template>
<el-dialog :visible.sync="$store.getters.show" title="提示">
<span>这是一段弹框信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="$store.dispatch('set_dialog_state',false)">取 消</el-button>
<el-button type="primary" @click="$store.dispatch('set_dialog_state',false)">确 定</el-button>
</span>
</el-dialog>
</template>
这儿就使用$store.dispatch('set_dialog_state',true)来触发actions中的set_dialog_state方法。官方推荐 , 将异步操作放在 action 中。
mapGetters、mapState、mapMutations、mapActions
很多时候 , $store.state.app.show
、$store.dispatch('set_dialog_state',true)
这种写法又长又臭 , 很不方便 , 我们没使用 vuex 的时候 , 获取一个状态只需要 this.show
, 执行一个方法只需要 this.
set_dialog_state
就行了 , 使用 vuex 使写法变复杂了 ?
使用 mapState、mapGetters、mapActions
就变得简单了。
mapGetters
比如子组件原来是这样:
<template>
<el-dialog :visible.sync="$store.getters.show" title="提示">
<span>这是一段弹框信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="$store.dispatch('set_dialog_state',false)">取 消</el-button>
<el-button type="primary" @click="$store.dispatch('set_dialog_state',false)">确 定</el-button>
</span>
</el-dialog>
</template>
通过$store.getter.show得到状态值,我们也可以这样:
<template>
<el-dialog :visible.sync="show" title="提示">
<span>这是一段弹框信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="$store.dispatch('set_dialog_state',false)">取 消</el-button>
<el-button type="primary" @click="$store.dispatch('set_dialog_state',false)">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name:'children',
data() {
return { };
},
computed:{
...mapGetters([
'show'
])
} }
</script>
mapGetters
辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
当然我们也可以给getters里面的状态show换一个名字,比如叫dialogShow,那么子组件就需要改成如下:
<template>
<el-dialog :visible.sync="dialogShow" title="提示">
<span>这是一段弹框信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="$store.dispatch('set_dialog_state',false)">取 消</el-button>
<el-button type="primary" @click="$store.dispatch('set_dialog_state',false)">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name:'children',
data() {
return { };
},
computed:{
...mapGetters({
dialogShow:'show'
})
} }
</script>
mapState
上面我们通过$store.getters.show拿到状态值,我们也可以通过$store.state.app.show拿到值,那么怎样使用mapState呢?
子组件写法:
<template>
<el-dialog :visible.sync="show" title="提示">
<span>这是一段弹框信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="$store.dispatch('set_dialog_state',false)">取 消</el-button>
<el-button type="primary" @click="$store.dispatch('set_dialog_state',false)">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import { mapState } from 'vuex'
export default {
name:'children',
data() {
return { };
},
computed:{
...mapState({
show:state => state.app.show
})
} }
</script>
上面使用的是箭头函数,也可以使用常规函数,如下:
<template>
<el-dialog :visible.sync="showState" title="提示">
<span>这是一段弹框信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="$store.dispatch('set_dialog_state',false)">取 消</el-button>
<el-button type="primary" @click="$store.dispatch('set_dialog_state',false)">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
import { mapState } from 'vuex'
export default {
name:'children',
data() {
return { };
},
computed:{
...mapState({
show:state => state.app.show, //方式一 箭头函数
showState(state){ //方式二 常规函数
return state.app.show
}
})
} }
</script>
mapMutations
你可以在组件中使用 $store.commit('xxx')
提交 mutation,或者使用 mapMutations
辅助函数将组件中的 methods 映射为 store.commit
调用
父组件代码如下:
<template>
<div>
<a href="javascript:;" @click="SET_DIALOG_STATE(true)">点击</a>
<common-dialog></common-dialog>
弹框是否显示:{{$store.state.app.show}}
</div>
</template> <script>
import { mapMutations } from 'vuex'
import commondialog from '@/components/dialog'
export default {
name: 'parent',
components:{
'common-dialog':commondialog
},
data () {
return { }
}, methods:{
...mapMutations(['SET_DIALOG_STATE'])
}
}
</script>
给方法名换个名字:
<template>
<div>
<a href="javascript:;" @click="changeState(true)">点击</a>
<common-dialog></common-dialog>
弹框是否显示:{{$store.state.app.show}}
</div>
</template> <script>
import { mapMutations } from 'vuex'
import commondialog from '@/components/dialog'
export default {
name: 'parent',
components:{
'common-dialog':commondialog
},
data () {
return { }
}, methods:{
...mapMutations({
changeState:'SET_DIALOG_STATE' //改变名字
})
}
}
</script>
mapActions
你在组件中使用$store.dispatch('xxx')
分发 action,或者使用 mapActions
辅助函数将组件的 methods 映射为 store.dispatch
调用
父组件代码:
<template>
<div>
<a href="javascript:;" @click="set_dialog_state(true)">点击</a>
<common-dialog></common-dialog>
弹框是否显示:{{$store.state.app.show}}
</div>
</template> <script>
import { mapActions } from 'vuex'
import commondialog from '@/components/dialog'
export default {
name: 'parent',
components:{
'common-dialog':commondialog
},
data () {
return { }
}, methods:{
...mapActions (['set_dialog_state'])
}
}
</script>
当然也可以换方法名,这儿就不贴代码了。
参考地址
vuex最简单、最直白、最全的入门文档的更多相关文章
- [转] vuex最简单、最直白、最全的入门文档
前言 我们经常用element-ui做后台管理系统,经常会遇到父组件给子组件传递数据,下面一个简单的例子,点击按钮,把弹框显示变量数据通过子组件的props属性传递,子组件通过$emit事件监听把数据 ...
- vuex最简单、最详细的入门文档
如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 . 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一 ...
- vuex入门文档
如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 . 我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一 ...
- IDEA / WebStorm / PhpStorm 添加jQuery自动提示,自动补全,提醒文档
应该是JetBrains系列IDE通用的方法,网上其他一些方法有的过时了,有的不全 默认情况下没有JQuery补全,按照以下方法添加 1. 打开Settings,Languages & Fra ...
- MongoDB入门---文档查询之$type操作符&limit方法&skip方法&简单排序(sort)操作
上一篇文章呢,已经分享过了一部分查询操作了,这篇文章呢?就来继续分享哈.接下来呢我们直接看MongoDB中的$type操作符哈.它呢是基于BSON类型来检索集合中匹配的数据类型,并且返回结果,在Mon ...
- FullPage.js全屏插件文档及使用方法
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站 下载地址 下载地址 相关示例:基于fullpage.js实现的360全屏滑动效果 支持功能 支持 ...
- 最简单,最实用的数据库CHM文档生成工具——DBCHM
DBCHM支持SqlServer/MySql/Oracle/PostgreSQL等数据库的表列批注维护管理. DBCHM有以下几个功能 表,列的批注可以编辑保存到数据库. 表,列的批注支持通过pdm文 ...
- hadoop2.2.0_hbase0.96_zookeeper3.4.5全分布式安装文档下载
本文档主要内容有: 1.hadoop 2.2.0 集群安装与部署 2.HBase 0.96 集群安装与部署 3.Zookeeper 3.4.5集群安装部署 备注:安装文档可能有所遗漏,后续将持续更新. ...
- Java全系列帮助文档下载
JDK(Java Development Kit,Java开发包,Java开发工具)是一个写Java的applet和应用程序的程序开发环境.它由一个处于操作系统层之上的运行环境还有开发者编译,调试和运 ...
随机推荐
- 基于ko-easyui实现的PC前端模板功能完善
上一篇博客我向大家介绍了基于ko-easyui实现的开发模板,博客地址:https://www.cnblogs.com/cqhaibin/p/9825465.html#4095185.但在还遗留三个问 ...
- CAP带你轻松玩转Asp.Net Core消息队列
CAP是什么? CAP是由我们园子里的杨晓东大神开发出来的一套分布式事务的决绝方案,是.Net Core Community中的第一个千星项目(目前已经1656 Star),具有轻量级.易使用.高性能 ...
- 第7章 UserInfo端点(UserInfo Endpoint) - IdentityModel 中文文档(v1.0.0)
OpenID Connect UserInfo端点的客户端库是作为扩展HttpClient方法提供的. 以下代码将访问令牌发送到UserInfo端点: var client = new HttpCli ...
- C# 操作Word页眉页脚——奇偶页/首页不同、不连续设置页码、复制页眉页脚、锁定页眉页脚、删除页眉页脚
前言 本文是对Word页眉页脚的操作方法的进一步的阐述.在“C# 添加Word页眉页脚.页码”一文中,介绍了添加简单页眉页脚的方法,该文中的方法可满足于大多数的页眉页脚添加要求,但是对于比较复杂一点的 ...
- Asp.NetCore轻松学-配置服务 apollo 部署实践
前言 Apollo(阿波罗)是携程框架部门研发的分布式配置中心,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性,适用于微服务配置 ...
- webpack4打包nodejs项目进阶版——多页应用模板
前段时间我写了个打包nodejs项目的文章,点击前往 但是,问题很多.因为之前的项目是个历史遗留项目,重构起来可能会爆炸,当时又比较急所以就写个的适用范围很小的webpack的打包方法. 最近稍微得空 ...
- 【Spark篇】---SparkSql之UDF函数和UDAF函数
一.前述 SparkSql中自定义函数包括UDF和UDAF UDF:一进一出 UDAF:多进一出 (联想Sum函数) 二.UDF函数 UDF:用户自定义函数,user defined functio ...
- 《前端之路》之 JavaScript原型及原型链详解
05:JS 原型链 在 JavaScript 的世界中,万物皆对象! 但是这各种各样的对象其实具体来划分的话就 2 种. 一种是 函数对象,剩下的就是 普通对象.其中 Function 和 Objec ...
- TabTopAutoTextSizeLayout【自定义文字字号区域(动态选项卡数据且可滑动)】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡布局LinearLayout类,实现可滑动效果.[实际情况中建议使用RecyclerView] 对<TabTo ...
- C# DataTable下载
从服务器下载datatable到本地,有多种处理方式,下面介绍三种. 方式一,将datatable转为txt下载. 步骤: 1.将datatable内容下载到服务器txt中 2.将服务器的txt下载到 ...