详解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实现控制表格行高亮实例
Jun 05 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
再谈Javascript中的异步以及如何异步
Aug 19 Javascript
javascript如何创建对象
Aug 29 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
Vue脚手架编写试卷页面功能
Mar 17 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下对字符串的递增运算代码
2010/08/21 PHP
深入PHP数据加密详解
2013/06/18 PHP
解析php中curl_multi的应用
2013/07/17 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
解决jQuery插件tipswindown与hintbox冲突
2010/11/05 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
探索Vue高阶组件的使用
2018/01/08 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
python冒泡排序简单实现方法
2015/07/09 Python
深入理解python多进程编程
2016/06/12 Python
关于pip的安装,更新,卸载模块以及使用方法(详解)
2017/05/19 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
Python实现判断一个整数是否为回文数算法示例
2019/03/02 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
意大利奢侈品零售商:ilDuomo Novara
2019/09/11 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
企划专员岗位职责
2013/12/09 职场文书
土木工程师职业规划范文
2014/03/07 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书