|
如果你在使用?vue.js?,那么我想你可能会对 vue 组件之间的通信感到崩溃 。
我在使用基于 vue.js 2.0 的UI框架?ElementUI?开发网站的时候,就遇到了这种问题 : 一个页面有很多表单,我试图将表单写成一个单文件组件,但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候,它们之间的通讯很麻烦 :
@click="show = true">点击
>
之所以这么麻烦,是因为父组件可以通过props?给子组件传递参数,但子组件内却不能修改父组件传过来的参数。
这时候,使用vuex?就可以比较方便的解决这种问题了 :
是不是方便了许多,这就是 vuex 最简单的应用,不要被网上其他教程吓到,vuex 原来可以这么简单 !
首先我们在 vue.js 2.0 开发环境中安装 vuex :
npm install vuex --save
然后,在?main.js?中加入 :
import vuex from 'vuex' store = vuex.Store({
再然后,在实例化 Vue对象时加入 store 对象 :
'#app'
template: ''
完成到这一步,上述例子中的?$store.state.show??就可以使用了。
前面为了方便,我们把 store 对象写在了 main.js 里面,但实际上为了便于日后的维护,我们分开写更好,我们在?str?目录下,新建一个?vuex?文件夹,然后在里面新建一个?store.js?:
import Vue from 'vue' 'vuex'export <span style="color: #0000ff">default <span style="color: #0000ff">new<span style="color: #000000"> vuex.Store({
state:{
show:<span style="color: #0000ff">false<span style="color: #000000">
}
})
那么相应的,在 main.js 里的代码应该改成 :
import store from './vuex' //import store from './vuex/store'
<span style="color: #0000ff">new <span style="color: #000000"> Vue({
el: '#app'<span style="color: #000000">,<span style="color: #008000">//<span style="color: #008000">使用store
template: ''<span style="color: #000000">,components: { App }
})
这样就把store分离出去了，那么还有一个问题是：这里?$store.state.show?无论哪个组件都可以使用,那组件多了之后,状态也多了,这么多状态都堆在 文件夹下的store.js?不好维护怎么办 ?
我们可以使用 vuex 的?modules?,把 vuex 文件夹下的?store.js?改成 :
import Vue from 'vue' 'vuex'import dialog_store from '<span style="color: #e33b1b">../components/dialog_store.js';<span style="color: #008000">//<span style="color: #008000">引入某个store对象
<span style="color: #000000">
export <span style="color: #0000ff">default <span style="color: #0000ff">new<span style="color: #000000"> vuex.Store({
<span style="color: #339966"> modules: {
dialog: dialog_store
}
})
这里我们引用了一个?dialog_store.js?,在这个 js 文件里我们就可以单独写 dialog 组件的状态了 :
export
做出这样的修改之后,我们将之前我们使用的$store.state.show?统统改为?$store.state.dialog.show?即可。
如果还有其他的组件需要使用 vuex,就新建一个对应的状态文件,然后将他们加入 store 文件夹下的 index.js 文件中的?modules?中。
: {
: dialog_store,other: other,
}
前面我们提到的对话框例子,我们对vuex 的依赖仅仅只有一个?$store.state.dialog.show?一个状态,但是如果我们要进行一个操作,需要依赖很多很多个状态,那管理起来又麻烦了 !
mutations?登场,问题迎刃而解 :
export state:{
show:(state){
state.show = state.show?:
使用 mutations 后,原先我们的父组件可以改为 :
使用?$store.commit('switch_dialog')?来触发mutations?中的?switch_dialog?方法。
这里需要注意的是:
-
mutations中的方法是不分组件的,假如你在 dialog_stroe.js 文件中的定义了switch_dialog?方法,在其他文件中的一个?switch_dialog?方法,那么$store.commit('switch_dialog')?会执行所有的?switch_dialog?方法。
-
mutations里的操作必须是同步的。
你一定好奇,如果在?mutations?里执行异步操作会发生什么事情,实际上并不会发生什么奇怪的事情,只是官方推荐,不要在?mutations?里执行异步操作而已。
多个?state?的操作,使用?mutations?会来触发会比较好维护,那么需要执行多个 mutations 就需要用?action?了:
export state:{
show:state){
state.show = state.show?:
context.commit('switch_dialog'
那么,在之前的父组件中,我们需要做修改,来触发 action 里的 switch_dialog 方法:
使用?$store.dispatch('switch_dialog')?来触发?action?中的?switch_dialog?方法。
官方推荐,将异步操作放在 action 中。
?getters?和 vue 中的?computed?类似,都是用来计算 state 然后生成新的数据 ( 状态 ) 的。
还是前面的例子,假如我们需要一个与状态?show?刚好相反的状态,使用 vue 中的?computed?可以这样算出来 :
!.state.dialog.show;
}
}
那么,如果很多很多个组件中都需要用到这个与 show 刚好相反的状态,那么我们需要写很多很多个?not_show?,使用?getters?就可以解决这种问题 :
export state:{
show:state){
!
我们在组件中使用?$store.state.dialog.show?来获得状态?show?,类似的,我们可以使用?$store.getters.not_show?来获得状态?not_show?。
注意 :$store.getters.not_show?的值是不能直接修改的,需要对应的 state 发生变化才能修改。
很多时候,$store.state.dialog.show?、$store.dispatch('switch_dialog')?这种写法又长又臭,很不方便,我们没使用 vuex 的时候,获取一个状态只需要?this.show?,执行一个方法只需要?this.switch_dialog?就行了,使用 vuex 使写法变复杂了 ?
使用?、、?就不会这么复杂了。
以 为例 :
:visible.sync="">
相当于：
">
mapGetters、mapActions 和 mapState 类似,?mapGetters?一般也写在?computed?中,mapActions?一般写在?methods?中。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
