详解vuex之store拆分即多模块状态管理(modules)篇


Posted in Javascript onNovember 13, 2018

了解vuex的朋友都知道它是vue用来集中管理状态的容器,如果了解过Reduce的朋友可能看见他时就会非常熟悉,都是用来管理全局的状态的,实现不同组件之间相互的数据访问。这里我们不介绍vuex,主要介绍vuex拆分store以及多模块管理。我们知道如果一个项目非常大的话状态就会非常的多,如果不进行分类处理,所有的状态都维护在一个state里面的话,状态管理就会变得非常的混乱,这样非常不利于项目的后期维护。我们现在前端推崇模块化开发,为的就是提高开发效率和维护效率,避免重复工作。那么vuex是怎么样解决这个问题的呢?这个时候我们今天要讲的主角modules就要闪亮登场了。
其实这个用起来是非常简单的,正常情况下,我们在用vuex的时候我们是这样定义的:

states.js //保存应用的状态值

export default {
  bookList:["西游记","水浒传","红楼梦","三国演义"]
}

mutations.js //在这个文件中定义对状态值的操作,增删改查。

export default {//这里要注意不要在mutations里面进行异步操作
  ADD_BOOK(state,book){
    state.bookList.push(book);
    return true;
  },
  DELETE_BOOK(state,id){
  }
}

getters.js //将我们在states中定义的值暴露在store.getters对象中,便于我们在组件中可以通过store.getters对象中,便于我们在组件中可以通过store.getters.bookList访问数据

export default {
  bookList:function(state){
    return state.bookList;
  }
}

actions.js //其实这里定义的方法只是将mutation.js中定义的方法进行了一次封装,就是去触发mutations.js中的方法。如果传如的参数需要异步获取的话,我们可以在这里等待异步返回成功后在触发mutations中的方法。在组件中这两个文件定义的方法都可以直接调用,mutations中定义的方法是通过store.dispath(′ADDBOOK′,book)调用的,而actons定义的方法是通过store.dispath(′ADDBOOK′,book)调用的,而actons定义的方法是通过store.commit(‘ADD_BOOK',book),调用的。

export default {//在action中可以进行异步操作。
  add_book({commit},book){
   commit('ADD_BOOK',book);
  },
  delete_book({commit},book){
   commit('DELETE_BOOK',id);
  }
}

这里有时我们还可能会看见一个文件叫mutations_type.js其实这个文件定义的是mutations中的方法名,我自己在用的时候反正没定义这个文件,自己看着办如果喜欢你就定义上。

上面定义的文件定义好了之后,我们就可以将我们定义的这些对象加入到vuex的Store中去了
store.js

import vue from 'vue'
import vuex from 'vuex'
import states from './state.js'
import mutatons from './mutations.js'
import actons from './actions.js'
import getters from './getters'
vue.use(vuex);
export default new vuex.Store({
          ststes,
          mutatons,
          getters,
          actions
         });

这样我们就写完整了一个store了。我们可以看出这里我们只有一个总模块,那如果我们要将总模块拆分成几个小模块,那应该怎样定义呢?

import vue from 'vue'
import vuex from 'vuex'
import states from './state.js'
import mutatons from './mutations.js'
import actons from './actions.js'
import getters from './getters'
vue.use(vuex);
export default new vuex.Store({
                modules:{
                     mod1:{
                        states,
                        mutatons,
                        getters,
                        actions
                        },
                     mod2:{}
                  }
         });
import vue from 'vue'
import vuex from 'vuex'
import states from './state.js'
import mutatons from './mutations.js'
import actons from './actions.js'
import getters from './getters'
vue.use(vuex);
export default new vuex.Store({
                modules:{
                    mod1:{states,
                       mutatons,
                       getters,
                       actions
                      },
                    mod2:{}
                  }
         });

我自己在做项目的时候我一般将一个子模块的state,mutations,actions,getter写在一个文件中如:

mod1.js

export default {
  state:{},
  mutatons:{},
  actions:{},
  getters:{}
}

mod2.js

export default {
  state:{},
  mutatons:{},
  actions:{},
  getters:{}
}

然后在将几个mod合并到store中去:

import vue from 'vue'
import vuex from 'vuex'
import mod1 from './mod1.js'
import mod2 from './mod2.js'
vue.use(vuex);
export default new vuex.Store({
                    modules:{
                          mod1:mod1,
                          mod2:mod1
                  }
         });

我感觉这样写的话代码结构更加直观,清晰。而且正常的话一个子模块一般不会有太多的状态和方法。当然如果项目中子模块的状态和方法确实太多,我们还是推荐将state,actions,getters,mutations单独写在不同的文件中,然后将不同的子模块的这些文件放在一个文件夹中,这样就代表一个子状态管理模块。

通过将总的store拆分过后,我们在状态管理和维护的时候就更加清晰了。

在创建出store后,我们需要将store挂载到vue上去

import vue from 'vue'
import store from './store'
var vue = new Vue({
 store,
 ···· 
}).$mount("#app")

之后在组建中就可以使用和管理前面定义的状态了,

<template>
</template>
<script>
  export default{
       computed{
              bookList:this.$store.mod1.bookList,
       },
       methods:{
             addBook:book=>this.$store.mod1.commit('ADD_BOOK',book);//这里需要注意,如果你是用了子模块的这种方法你需要加上模块名这是mod1,如果没有就不需要加。
             deleteBook:id=>this.$store.mod1.disaptch('DELETE_BOOK',id);
    }    
  }
</script>

总结:

将store进行拆分,有利于我们更好的管理项目中的状态,以及使我们的项目维护更加加单高效。各个模块之间的开发互相不影响。

好了,这次就简单的介绍到这里,这次主要是介绍怎么用。并没有深入到他的实现原理,对于vue的涉世未深的人来说,我感觉还是够用了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery之网页换肤实现代码
Apr 30 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
jQuery实现点击关注和取消功能
Jul 03 jQuery
Angular CLI 安装和使用教程
Sep 13 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
对angularJs中自定义指令replace的属性详解
Oct 09 Javascript
js异步上传多张图片插件的使用方法
Oct 22 Javascript
javascript头像上传代码实例
Sep 28 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
JS实现页面侧边栏效果探究
Jan 08 Javascript
类和原型的设计模式之复制与委托差异
Jul 07 Javascript
JS获取当前时间的实例代码(昨天、今天、明天)
Nov 13 #Javascript
checkbox在vue中的用法小结
Nov 13 #Javascript
React父子组件间的传值的方法
Nov 13 #Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 #Javascript
详解如何用typescript开发koa2的二三事
Nov 13 #Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 #Javascript
koa源码中promise的解读
Nov 13 #Javascript
You might like
PHP脚本中include文件出错解决方法
2008/11/20 PHP
php htmlspecialchars加强版
2010/02/16 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
php常用字符函数实例小结
2016/12/29 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
Python运用于数据分析的简单教程
2015/03/27 Python
Python设计模式之观察者模式简单示例
2018/01/10 Python
Python中常用信号signal类型实例
2018/01/25 Python
Python全排列操作实例分析
2018/07/24 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
django 取消csrf限制的实例
2020/03/13 Python
利用python实现汉诺塔游戏
2021/03/01 Python
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
2020/10/29 HTML / CSS
CSS3 实现的加载动画
2020/12/07 HTML / CSS
PHP中如何创建和修改数组
2012/05/02 面试题
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
标准导师推荐信(医学类)
2013/10/28 职场文书
大型车展策划方案
2014/02/01 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
社区助残日活动总结
2014/08/29 职场文书
个人纪律作风整改措施思想汇报
2014/10/12 职场文书
2014年招生工作总结
2014/11/26 职场文书
介绍信格式样本
2015/05/05 职场文书
催款函范本大全
2015/06/24 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
Idea连接MySQL数据库出现中文乱码的问题
2021/04/14 MySQL