详解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 相关文章推荐
My Desktop :) 桌面式代码
Dec 29 Javascript
javascript 原型模式实现OOP的再研究
Apr 09 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
原生JS实现$.param() 函数的方法
Aug 10 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 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实现定时器任务(Timer)
2015/07/31 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
JavaScript函数中关于valueOf和toString的理解
2016/06/14 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
JS数据类型分类及常用判断方法
2020/11/19 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
python使用mailbox打印电子邮件的方法
2015/04/30 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python对象中__del__方法起作用的条件详解
2018/11/01 Python
使用python批量读取word文档并整理关键信息到excel表格的实例
2018/11/07 Python
python django下载大的csv文件实现方法分析
2019/07/19 Python
python实现的config文件读写功能示例
2019/09/24 Python
Python如何实现定时器功能
2020/05/28 Python
如何编写python的daemon程序
2021/01/07 Python
用python制作个音乐下载器
2021/01/30 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
生物学学生自我评价
2014/01/17 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
如何写自我鉴定
2014/03/19 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
个人收入证明范本
2015/06/12 职场文书
《海上日出》教学反思
2016/02/23 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS