看官方文档看的一脸懵逼,后来看到了一篇比较容易理解的博文,大概写下自己的理解
一、vuex是什么
是基于vue的状态管理模式,一般用于解决大型项目中子组件向父组件传递数据的问题
二、基本概念
1、state
需要使用store的数据存储在state里,并且在组件里通过this.$store.state.xxx访问
import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex); export default new vuex.Store({ state:{ show:false } })
2、mutations
$store.state.xxx一次只能操作一个state中的数据,如果需要同时操作state中多个数据,就需要使用mutations。
export default { state:{//state show:false }, mutations:{ switch_dialog(state){//这里的state对应着上面这个state state.show = state.show?false:true; //你还可以在这里执行其他的操作改变state } } }
在组件里,可以通过this.$store.commit('switch_dialog')触发这个事件。官方文档注明,在mutations中的操作必须是同步的,同时mutations是不区分组件的,如果在别的module中存在同名的函数,commit之后会一起触发。
$store.commit()是可以额外传入参数的,提交事件时可以直接传入,也可以选择对象风格
state:{ show: false }, mutations:{ switch_dialog(state, n){//载荷 state.show = n } }
//传参的时候可以 this.$store.commit('switch_dialog',true)
//也可以选择对象风格 this.$store.commit({ type: 'switch_dialog' , n: true})
3、module
如果想区分不同组件的state,可以使用module
import Vue from 'vue' import vuex from 'vuex' import dialog_store from 'dialog_store.js' //引入对应组件的js文件 Vue.use(vuex); export default new vuex.Store({ modules: { dialog: dialog_store //上面引入的模块 } })
这样就可以在对应组件的js文件里管理对应的状态了(dialog_store.js)
export default { state:{ show:false } }
在组件中可以通过this.$store.state.dialog.show访问它
4、action
多个state操作需要通过mutations,那么如果是多个mutations的操作就需要通过action了,另外官方推荐异步操作要放在action里。
export default { state:{//state show:false }, mutations:{ switch_dialog(state){//这里的state对应着上面这个state state.show = state.show?false:true; //你还可以在这里执行其他的操作改变state } }, actions:{ switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法 context.commit('switch_dialog'); //你还可以在这里触发其他的mutations方法 }, } }
在组件里可以通过this.$store.dispatch('switch_dialog')触发事件
5、getters
vuex的getters可以看作是vue中的computed,如果需要对state中某个属性进行额外的运算,可以在getters中进行定义
export default { state:{//state show:false }, getters:{ not_show(state){//这里的state对应着上面这个state return !state.show; } }, mutations:{ switch_dialog(state){//这里的state对应着上面这个state state.show = state.show?false:true; //你还可以在这里执行其他的操作改变state } }, actions:{ switch_dialog(context){//这里的context和我们使用的$store拥有相同的对象和方法 context.commit('switch_dialog'); //你还可以在这里触发其他的mutations方法 }, } }
在组件中,我们可以通过this.$store.getters.not_show获得这个状态,getters中的状态不可以直接进行修改,只能获取它的值
6、mapState、mapAction、mapGetters
如果你觉得上面获取状态的写法this.$store.state.xxx过于麻烦,毕竟我们平时获取一个数据只需要写this.xxx,可以选择使用mapState、mapAction、mapGetters,下面引自上面提到的那篇博文
以mapState为例
<template> <el-dialog :visible.sync="show"></el-dialog> </template> <script> import {mapState} from 'vuex'; export default { computed:{ ...mapState({ show:state=>state.dialog.show }), } } </script>
相当于
<template> <el-dialog :visible.sync="show"></el-dialog> </template> <script> import {mapState} from 'vuex'; export default { computed:{ show(){ return this.$store.state.dialog.show; } } } </script>
mapGetters、mapActions 和 mapState 类似 ,mapGetters 一般也写在computed中 , mapActions
一般写在 methods
中。
三、安装和使用方法
安装 vuex :
npm install vuex --save
然后为了方便管理,可以在src/下创建一个store文件夹,创建一个index.js, :
import vuex from 'vuex' Vue.use(vuex); var store = new vuex.Store({ state:{ show:false } })
再然后 , 在实例化 Vue对象时加入 store 对象 :
new Vue({ el: '#app', router, store, template: '<App/>', components: { App } })
完成到这一步 , 上述例子中的 $store.state.show
就可以使用了。