详解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 相关文章推荐
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
Jqprint实现页面打印
Jan 06 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
vue脚手架中配置Sass的方法
Jan 04 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
laravel实现中文和英语互相切换的例子
Sep 30 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 Javascript
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下escape解码函数的实现方法
2010/08/08 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
基于PHP array数组的教程详解
2013/06/05 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
CI框架Session.php源码分析
2014/11/03 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
javascript中的一些注意事项 更新中
2010/12/06 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
vue中本地静态图片路径写法
2018/03/06 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
JS实现图片切换效果
2018/11/17 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
原生JS实现京东查看商品点击放大
2020/12/21 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
python threading和multiprocessing模块基本用法实例分析
2019/07/25 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
软件测试笔试题
2012/10/25 面试题
求职信怎么写
2014/05/23 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
2015年共青团工作总结
2015/05/15 职场文书
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python