详解Vuex下Store的模块化拆分实践


Posted in Javascript onJuly 31, 2019

前言

最近的项目用到了 vue.js + vuex + vue-router 全家桶,版本为 >2.0,在搞Store的时候发现,圈子里大部分关于vuex的文章都是比较基础的Demo搭建方式,很少有涉及到比较复杂的模块化拆分的Store实践,而且事实上也有朋友在实践中问到过这方面的内容,vuex自身提供了模块化的方式,因此在这里总结一下我自己在项目里的心得。

模块化拆分

vue.js的项目文件结构在这里就不说了,大家可以通过vue-cli初始化项目,脚手架会为你搭建一个start项目的最佳实践。

默认你已经搭架好了一个项目,而且需要建立或者已经是一个复杂的Store,但是还没有进行模块拆分,你可以尝试对其进行模块拆分,当然在一开始你不必一定需要这么做。

1. 安装Vuex,建立文件结构

在项目根目录下安装vuex:

npm install vuex -S

安装完毕后,在项目的src文件夹下新建一个store文件夹,并且分别在其中新建modules,actions,mutations,getters,constants子文件夹和一个index.js文件。

目录结构如下:

└─ demo/
  ├── build/
  ├── config/
  ├── node_modules/
  ├── src/
  │  ├── assets/
  │  ├── components/
  │  ├── store/
  │  │  ├── actions/ 
  │  │  │  ├──aAction.js
  │  │  │  ├──bAction.js
  │  │  │  └──cAction.js
  │  │  ├── constants/
  │  │  │  └── types.js
  │  │  ├── getters/
  │  │  │  └── aGetter.js
  │  │  ├── modules/
  │  │  │  ├── aModules.js
  │  │  │  ├── bModules.js
  │  │  │  ├── cModules.js
  │  │  │  └── index.js
  │  │  ├── mutations/
  │  │  │  ├── aMutation.js
  │  │  │  ├── bMutation.js
  │  │  │  └── cMutation.js
  │  │  └── index.js
  │  ├── App.vue
  │  └── main.js
  ├── static/
  ├── utils/
  ├── test/
  └── index.html

好了,基本的文件结构大概就是上面?这样的。

2. 编写模块A

在编写模块之前,首先设定一些type类,例如:

types.js

module.exports = keyMirror({

  FETCH_LIST_REQUEST: null,
  FETCH_LIST_SUCCESS: null,
  FETCH_LISR_FAILURE: null
  
})

function keyMirror (obj) {
 if (obj instanceof Object) {
  var _obj = Object.assign({}, obj)
  var _keyArray = Object.keys(obj)
  _keyArray.forEach(key => _obj[key] = key)
  return _obj
 }
}

上面自己实现keyMirror的方法,大家也可以使用下面这个包:

https://github.com/STRML/keyMirror

keyMirror的作用就是下面这个一个形式?,作用其实也不是很大:

Input: {key1: null, key2: null}

Output: {key1: key1, key2: key2}

actions/aAction.js

import { FETCH_LIST_REQUEST, FETCH_LIST_SUCCESS, FETCH_LISR_FAILURE } from '../constants/types'
import { toQueryString } from '../../utils'
import axios from 'axios'

export const fetchListAction = {
  fetchList ({ commit, state }, param) {
    commit(FETCH_LIST_REQUEST)
    axios.get('http://youdomain.com/list')
     .then(function (response) {
      commit(FETCH_LIST_SUCCESS, {
        data: response.data
      }) 
      console.log(response);
     })
     .catch(function (error) {
      commit(FETCH_LIST_FAILURE, {
        error: error
      })
      console.log(error);
     });
  }
}

getters/aGetter.js

export const = fetchListGetter = {
  hotList (state) {
    return state.list.data.slice(0, 10)
  }
}

mutations/aMutation.js

import { FETCH_LIST_REQUEST, FETCH_LIST_SUCCESS, FETCH_LISR_FAILURE } from '../constants/types'

export const fetchListMutation = {
  [FETCH_LIST_REQUEST] (state) {
    state.isFetching = true
  },
  [FETCH_LIST_SUCCESS] (state, action) {
    state.isFetching = false
    state.data = action.data
    state.lastUpdated = (new Date()).getTime()
  },
  [FETCH_LIST_FAILURE] (state, action) {
    state.isFetching = false
    state.error = action.error
  }
}

modules/aModule.js

import { fetchListAction } from '../actions/aAction'
import { fetchListGetter } from '../getters/aGetter'
import { fetchListMutation } from '../mutations/aMutation'

export const list = {
  state: {
    isFetching: false,
    data: []
  }
  actions: fetchListAction,
  getters: fetchListGetter,
  mutations: fetchListMutation
}

modules/index.js

import { list } from './aModule'

module.exports = {
  list: list
}

3. 挂载store

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'
import { list } from './modules'

Vue.use(Vuex)

const store = new Vuex.Store({
 modules: {
  list: list
  
 },
 plugins: [createLogger()],
 strict: process.env.NODE_ENV !== 'production'
})

if (module.hot) {
 module.hot.accept(['./mutations'], () => {
  const newMutations = require('./mutations').default

  store.hotUpdate({
   mutations: newMutations
  })
 })
}

export default store

4. store注入vue实例

main.js

····
import store from './store'

 ···· 


var vue = new Vue({
 store,
 
 ···· 

})

vue.$mount('#app')

5. 在Component中使用

Vuex 提供了组件中使用的mapState,mapAction,mapGetter方法,因此可以很方便的调用。

Example.vue

<template>

 ·········

</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex'
module.exports = {
  ·······
  methods: {
    ...mapActions([
      'fetchList'
    ])
  },
  computed: {
    ...mapState{
      list: state => state.list
    },
    ...mapGetters{[
      'hotList'
    ]}
  }
}
</script>
<style>
  ·······
</style>

复用模块

模块化拆分之后可以实现较为复杂的数据流,特别地,如果对action和mutation稍加改造,就可以复用模块:
比如我们在Example.vue中发起Action:

Example.vue

<template>

 ·········

</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex'
module.exports = {
  ·······
  mounted () {
    this.fetchList({
      request: 'week'
    })
  },
  methods: {
    ...mapActions([
      'fetchList'
    ])
  },
  computed: {
    ...mapState{
      list: state => state.list
    },
    ...mapGetters{[
      'hotList'
    ]}
  }
}
</script>
<style>
  ·······
</style>

在上面的例子中,我们在组件挂载完成之后发起了一个fetchList的action,并添加了一个名为request的参数,这里给一个week值,也可以给按照业务需要给month、year之类的值,接下来对aAction.js做一些修改。

actions/aAction.js

import { FETCH_LIST_REQUEST, FETCH_LIST_SUCCESS, FETCH_LISR_FAILURE } from '../constants/types'
import { toQueryString } from '../../utils'
import axios from 'axios'

export const fetchListAction = {
  fetchList ({ commit, state }, param) {
    commit(FETCH_LIST_REQUEST, {
      request: param['request']
    })
    axios.get(`http://youdomain.com/${param['request']}list`)
     .then(function (response) {
      commit(FETCH_LIST_SUCCESS, {
        request: param['request']
        data: response.data
      }) 
      console.log(response);
     })
     .catch(function (error) {
      commit(FETCH_LIST_FAILURE, {
        request: param['request']
        error: error
      })
      console.log(error);
     });
  }
}

请求成功之后,在 commit()中加入了一个request的参数,这样Mutation就可以从里面获取相应的参数,最后对aMutation做一些修改。

mutations/aMutation.js

import { FETCH_LIST_REQUEST, FETCH_LIST_SUCCESS, FETCH_LISR_FAILURE } from '../constants/types'

export const fetchListMutation = {
  [FETCH_LIST_REQUEST] (state, action) {
    state[action.request].isFetching = true
  },
  [FETCH_LIST_SUCCESS] (state, action) {
    state[action.request].isFetching = false
    state[action.request].data = action.data
    state[action.request].lastUpdated = (new Date()).getTime()
  },
  [FETCH_LIST_FAILURE] (state, action) {
    state[action.request].isFetching = false
    state[action.request].error = action.error
  }
}

state加入了[action.request],以区分不同的接口数据。

完成以上修改后,只需要在组件调用相应的action时加入不同的参数,就可以调用相同类型但数据不同的接口。

总结

以上是我在Vuex实践中总结的一些东西,分享给大家,如果有不合理或者错误❌的地方,也希望各位老司机不吝赐教,有机会多交流。也希望大家多多支持三水点靠木。

微信号:pasturn
Github:https://github.com/pasturn

Javascript 相关文章推荐
Prototype的Class.create函数解析
Sep 22 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
Vue点击切换颜色的方法
Sep 13 Javascript
es6数值的扩展方法
Mar 11 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
JS forEach跳出循环2种实现方法
Jun 24 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
ES6 Iterator接口和for...of循环用法分析
Jul 31 #Javascript
Vuex 模块化使用详解
Jul 31 #Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 #Javascript
express框架下使用session的方法
Jul 31 #Javascript
ES6中异步对象Promise用法详解
Jul 31 #Javascript
JS实现在线ps功能详解
Jul 31 #Javascript
ES6中定义类和对象的方法示例
Jul 31 #Javascript
You might like
PHP新手上路(二)
2006/10/09 PHP
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
php生成缩略图填充白边(等比缩略图方案)
2013/12/25 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
用javascript自动显示最后更新时间
2007/03/15 Javascript
jQuery学习笔记之Helloworld
2010/12/22 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
javascript数字时钟示例分享
2014/04/23 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
Angular.js实现动态加载组件详解
2017/05/28 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
django之常用命令详解
2016/06/30 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
Python中join()函数多种操作代码实例
2020/01/13 Python
Python如何实现邮件功能
2020/05/27 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
利用python 下载bilibili视频
2020/11/13 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
公司员工安全协议书
2014/11/21 职场文书
2015年宣传部部长竞选演讲稿
2014/11/28 职场文书
城管年度个人总结
2015/02/28 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP