vuex入门最详细整理

2023-07-29 20:52:04 91

如果你在使用vue.js,那么我想你可能会对vue组件之间的通信感到崩溃。

我在使用基于vue.js2.0的UI框架ElementUI开发网站的时候,就遇到了这种问题:一个页面有很多表单,我试图将表单写成一个单文件组件,但是表单(子组件)里的数据和页面(父组件)按钮交互的时候,它们之间的通讯很麻烦:

之所以这么麻烦,是因为父组件可以通过props给子组件传递参数,但子组件内却不能直接修改父组件传过来的参数。

这时候,使用vuex就可以比较方便的解决这种问题了:

是不是方便了许多,这就是vuex最简单的应用,不要被网上其他教程吓到,vuex原来可以这么简单!

安装、使用vuex

首先我们在vue.js2.0开发环境中安装vuex:

npminstallvuex--save

然后,在main.js中加入:

importvuexfrom'vuex'
Vue.use(vuex);
varstore=newvuex.Store({//store对象
state:{
show:false
}
})

再然后,在实例化Vue对象时加入store对象:

newVue({
el:'#app',
router,
store,//使用store
template:'',
components:{App}
})

完成到这一步,上述例子中的$store.state.show就可以使用了。

modules

前面为了方便,我们把store对象写在了main.js里面,但实际上为了便于日后的维护,我们分开写更好,我们在src目录下,新建一个store文件夹,然后在里面新建一个index.js:

importVuefrom'vue'
importvuexfrom'vuex'
Vue.use(vuex);

exportdefaultnewvuex.Store({
state:{
show:false
}
})

那么相应的,在main.js里的代码应该改成:

//vuex
importstorefrom'./store'

newVue({
el:'#app',
router,
store,//使用store
template:'',
components:{App}
})

这样就把store分离出去了,那么还有一个问题是:这里$store.state.show无论哪个组件都可以使用,那组件多了之后,状态也多了,这么多状态都堆在store文件夹下的index.js不好维护怎么办?

我们可以使用vuex的modules,把store文件夹下的index.js改成:

importVuefrom'vue'
importvuexfrom'vuex'
Vue.use(vuex);

importdialog_storefrom'../components/dialog_store.js';//引入某个store对象

exportdefaultnewvuex.Store({
modules:{
dialog:dialog_store
}
})

这里我们引用了一个dialog_store.js,在这个js文件里我们就可以单独写dialog组件的状态了:

exportdefault{
state:{
show:false
}
}

做出这样的修改之后,我们将之前我们使用的$store.state.show统统改为$store.state.dialog.show即可。

如果还有其他的组件需要使用vuex,就新建一个对应的状态文件,然后将他们加入store文件夹下的index.js文件中的modules中。

modules:{
dialog:dialog_store,
other:other,//其他组件
}

mutations

前面我们提到的对话框例子,我们对vuex的依赖仅仅只有一个$store.state.dialog.show一个状态,但是如果我们要进行一个操作,需要依赖很多很多个状态,那管理起来又麻烦了!

mutations登场,问题迎刃而解:

exportdefault{
state:{//state
show:false
},
mutations:{
switch_dialog(state){//这里的state对应着上面这个state
state.show=state.show?false:true;
//你还可以在这里执行其他的操作改变state
}
}
}

使用mutations后,原先我们的父组件可以改为:

使用$store.commit('switch_dialog')来触发mutations中的switch_dialog方法。

这里需要注意的是:

1、mutations中的方法是不分组件的,假如你在dialog_stroe.js文件中的定义了

switch_dialog方法,在其他文件中的一个switch_dialog方法,那么

$store.commit('switch_dialog')会执行所有的switch_dialog方法。

2、mutations里的操作必须是同步的。

你一定好奇,如果在mutations里执行异步操作会发生什么事情,实际上并不会发生什么奇怪的事情,只是官方推荐,不要在mutationss里执行异步操作而已。

actions

多个state的操作,使用mutations会来触发会比较好维护,那么需要执行多个mutations就需要用action了:

exportdefault{
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方法
},
}
}

那么,在之前的父组件中,我们需要做修改,来触发action里的switch_dialog方法:

使用$store.dispatch('switch_dialog')来触发action中的switch_dialog方法。

官方推荐,将异步操作放在action中。

getters

getters和vue中的computed类似,都是用来计算state然后生成新的数据(状态)的。

还是前面的例子,假如我们需要一个与状态show刚好相反的状态,使用vue中的computed可以这样算出来:

computed(){
not_show(){
return!this.$store.state.dialog.show;
}
}

那么,如果很多很多个组件中都需要用到这个与show刚好相反的状态,那么我们需要写很多很多个not_show,使用getters就可以解决这种问题:

exportdefault{
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方法
},
}
}

我们在组件中使用$store.state.dialog.show来获得状态show,类似的,我们可以使用$store.getters.not_show来获得状态not_show。

注意:$store.getters.not_show的值是不能直接修改的,需要对应的state发生变化才能修改。

mapState、mapGetters、mapActions

很多时候,$store.state.dialog.show、$store.dispatch('switch_dialog')这种写法又长又臭,很不方便,我们没使用vuex的时候,获取一个状态只需要this.show,执行一个方法只需要this.switch_dialog就行了,使用vuex使写法变复杂了?

使用mapState、mapGetters、mapActions就不会这么复杂了。

以mapState为例:

相当于:

mapGetters、mapActions和mapState类似,mapGetters一般也写在computed中,mapActions一般写在methods中。

弄懂上面这些,你可以去看vuex文档了,应该能看懂了。

以上就是vuex入门最详细整理的详细内容，更多关于vuex入门知识点的资料请关注毛票票其它相关文章！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vuex入门最详细整理

热门推荐

随机推荐