Vuex模块化应用实践示例


Posted in Javascript onFebruary 03, 2020

Vuex作为Vue全家桶的成员之一,重要性肯定不用多说,正在做Vue项目的同学,随着项目需求、功能逐渐增加,用到Vuex也是早晚的事儿,作为一个前端,只能面对现实:学不动也得学!

这篇文章主要介绍Vuex在大型项目中的模块化及持久化应用实践,下面正文开始

Vuex的应用场景

  • 多个组件视图共享同一状态时(如登录状态等)
  • 多个组件需要改变同一个状态时
  • 多个组件需要互相传递参数且关系较为复杂,正常传参方式变得难以维护时
  • 持久化存储某些数据

所以我们把组件共享的状态抽离出来,不管组件间的关系如何,都通过Vuex来处理

组织store目录

我们先按模块化的方式组织store目录,并在Vue根实例中注册store,Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中

src
├── ...
├── main.js
├── App.vue
└── store
  ├── index.js     # 我们组装模块并导出 store 的地方
  └── modules
    ├── product.js    # 产品模块
    ├── windowInfo.js  # 窗口信息模块
    └── user.js     # 登录模块

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import product from './modules/product'
import windowInfo from './modules/windowInfo'

Vue.use(Vuex)

export default new Vuex.Store({
 modules: {
  // 注册modules中的模块
  user,
  product,
  windowInfo
 }
})

src/main.js

import ...
import store from './store' // 添加这行

new Vue({
 el: '#app',
 router,
 store, // 注入到根实例
 template: '<App/>',
 components: { App }
})

store的属性

state(状态对象)
state中存放多页面共享的状态字段

getters
相当于当前模块state的计算属性

mutations
如果想更新state中的字段,提交mutations中定义的事件是唯一的方式(key为事件名,value是一个函数),但是这个事件函数必须是同步执行的

actions
可以定义异步函数,并在回调中提交mutation,就相当于异步更新了state中的字段

Vuex模块化应用实践示例

vuex数据传递规则

使用方法

把窗口的高度和宽度存到Vuex中,并且每当窗口被resize,state中的高度和宽度自动更新

src/store/modules/windowInfo.js

import { MU_WIN_RESIZE } from '../../common/constants'
const windowInfo = {
 state: {
  // 初始化
  winHeight: 0,
  winWidth: 0
 },
 mutations: {
  // 这里把事件名统一抽离到constants.js统一管理,方便维护,避免重复。
  // 当然,你也可以不这么写。。
  // mutation事件接受的第一个参数是当前模块的state对象
  // 第二个参数是提交事件时传递的附加参数
  [MU_WIN_RESIZE] (state, payload) {
   const { winWidth, winHeight } = payload
   state.winWidth = winWidth
   state.winHeight = winHeight
  }
 },
 actions: {},
 getters: {}
}

export default windowInfo

src/common/constants.js

export const MU_WIN_RESIZE = 'MU_WIN_RESIZE' // 更新窗口尺寸

下面打开项目的根组件添加监听resize事件和提交mutation事件逻辑

src/App.vue

<!--上面的template我就不往这儿放了-->
<script>
 import { _on, _off, getClientWidth, getClientHeight } from './common/dom'
 import { MU_WIN_RESIZE } from './common/constants'
 import { mapMutations } from 'vuex'

 export default {
  name: 'app',
  data () {
   return {}
  },
  mounted () {
   this.handleResize()
   // 这里对addEventListener方法做了IE兼容处理,就不贴出来了,反正事件监听你们都会
   _on(window, 'resize', this.handleResize)
  },
  beforeDestroy () {
   _off(window, 'resize', this.handleResize)
  },
  methods: {
   // 对象展开运算符,不熟悉的同学该学学ES6了
   ...mapMutations({
    // 映射 this.winResize 为 this.$store.commit(MU_WIN_RESIZE)
    winResize: MU_WIN_RESIZE
   }),
   handleResize () {
    const winWidth = getClientWidth()
    const winHeight = getClientHeight()
    this.winResize({ winWidth, winHeight })
   }
  }
 }
</script>

到这一步,在拖动窗口触发‘resize'事件的时候,就会触发‘MU_WIN_RESIZE'这个mutation事件并把窗口宽高写入vuex,下面我们随便找个页面看能不能获取到我们写入的值

<template>
 <div class="row">窗口高:{{winHeight}} 窗口宽:{{winWidth}}</div>
</template>
<script>
 import { mapState } from 'vuex'
 export default {
  name: 'test',
  data () {
   return {}
  },
  computed: {
   // 把state写入计算属性
   // 如果使用mapGetters也是写入计算属性
   ...mapState({
    winHeight: state => state.windowInfo.winHeight,
    winWidth: state => state.windowInfo.winWidth
   })
  },
 }
</script>

有的时候我们会从后端获取一些下拉框选项的静态常量,而且很多页面都能用到,这个时候用Vuex是比较好的选择,涉及到后端获取,就要用到可以使用异步的actions了

src/store/modules/product.js

import {MU_PRODUCT_UPDATE_CONSTANTS} from '../../common/constants'

const product = {
 state: {
  productConstants: []
 },
 mutations: {
  [MU_PRODUCT_UPDATE_CONSTANTS] (state, payload) {
   state.productConstants = payload
  }
 },
 actions: {
  // action函数第一个参数接受一个与 store 实例具有相同方法和属性的 context 对象,
  // 因此你可以调用 context.commit 提交一个 mutation,
  // 或者通过 context.state 和 context.getters 来获取 state 和 getters
  // 这里虽然能获取到state,但是不建议直接修改state中的字段
  async getProductConstants ({ commit }, payload) {
   try {
    // 请求接口,如果需要参数可以通过payload传递
    const res = await this.$api.product.getConstants()
    commit(MU_PRODUCT_UPDATE_CONSTANTS, res)
   } catch (e) {
    console.error(e)
   }
  }
 },
 getters: {}
}

export default product

下面触发这个getProductConstants事件,触发这个action事件的位置需要注意一下,假设你有5个组件需要使用这个state,那就应该在这5个组件共同的父组件中调用一次action(找不到就在根实例中调用),然后在各个子组件中通过mapState或mapGetters获取state,千万不要每个组件使用前都调用一次action方法!

src/App.vue

<!--为了更直观的展示action,把之前的代码删掉了-->
<script>
 import { mapActions } from 'vuex' // 注意是mapActions

 export default {
  name: 'app',
  data () {
   return {}
  },
  created () {
   // 触发请求
   this.getProductConstants()
  }
  methods: {
   ...mapActions([
    // 映射 this.getProductConstants 为 this.$store.dispatch('getProductConstants')
    'getProductConstants'
   ])
  }
 }
</script>

mapGetters, mapMutations, mapActions,这几个函数可以接受对象也可以接受数组作为参数,如果你需要在组件中以别的名字调用该事件(像上面的mapMutations)就可以传入对象,key为新命名,value是store中定义的名字;否则的话传数组就好了。

那么问题来了,既然是异步操作,我想在操作结束后干点儿别的怎么做呢?
很简单,调用action中的异步函数(this.$store.dispatch)返回的是一个Promise,如果你跟我一样用的是async await:

<!--为了更直观的展示action,把之前的代码删掉了-->
<script>
 import { mapActions } from 'vuex' // 注意是mapActions

 export default {
  name: 'app',
  data () {
   return {}
  },
  async created () {
   // 触发请求
   await this.getProductConstants()
   // 接下来执行的操作会等待上面函数完成才会执行
  }
  methods: {
   ...mapActions([
    // 映射 this.getProductConstants 为 this.$store.dispatch('getProductConstants')
    'getProductConstants'
   ])
  }
 }
</script>

如果你用的不是async await那就麻烦一点,在actions中定义事件的时候return一个new Promise,官方文档中有一个例子

表单处理

当你把从state中获取的字段填在v-model中时,如果用户修改表单数据,v-model会尝试直接修改store中的数据,这样做会有两个问题:

  1. 破坏了vuex的数据传递规则,如果想修改state中的数据只能通过提交一个mutation
  2. 控制台报错:计算属性没有setter

官方提供了两种解决方法,我更倾向于下面这种,给计算属性添加setter,并在setter中提交mutation修改state:

<template>
 <input v-model="message">
</template>
<script>
  export default {
  name: 'app',
  data () {
   return {}
  },
  computed: {
   message: {
    get () {
     return this.$store.state.test.message
    },
    set (value) {
     this.$store.commit('updateMessage', value)
    }
   }
  }
  methods: {}
 }
</script>

Vuex持久化

推荐插件vuex-persist

安装插件:

npm install --save vuex-persist

引入、配置、加载插件:
src/store/persist.js

import VuexPersistence from 'vuex-persist'

const persist = new VuexPersistence({
 // 其他参数看文档
 storage: window.sessionStorage
})
export default persist.plugin

src/store/index.js

import ...
import persist from './persist'

Vue.use(Vuex)

export default new Vuex.Store({
 modules: {
  user,
  product,
  windowInfo
 },
 plugins: [persist]
})

现在刷新浏览器数据也不会重置了!

总结

以上就是vuex比较常规的操作了,第一次看官方文档的我是懵逼的、无助的,但是用了一段时间vuex再重新看文档的时候会有很多收获。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 新手学习常见问题解决方法
Apr 18 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
Jquery 效果使用详解
Nov 23 Javascript
jquery datatable服务端分页
Aug 31 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
Oct 12 Javascript
聊聊JS ES6中的解构
Apr 29 Javascript
微信小程序8种数据通信的方式小结
Feb 03 #Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 #Javascript
javscript 数组扁平化的实现
Feb 03 #Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 #Javascript
JavaScript中的类型检查
Feb 03 #Javascript
Vue的Eslint配置文件eslintrc.js说明与规则介绍
Feb 03 #Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 #Javascript
You might like
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
过虑特殊字符输入的js代码
2010/08/05 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
[01:00:26]Ti4主赛事胜者组第一天 EG vs NEWBEE 1
2014/07/19 DOTA
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
python妙用之编码的转换详解
2017/04/21 Python
python 生成器协程运算实例
2017/09/04 Python
如何在python中使用selenium的示例
2017/12/26 Python
教你使用python画一朵花送女朋友
2018/03/29 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Python函数参数类型及排序原理总结
2019/12/19 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
Python Tricks 使用 pywinrm 远程控制 Windows 主机的方法
2020/07/21 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
店长助理岗位职责
2013/12/13 职场文书
教师职称自我鉴定
2014/02/12 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
雷锋电影观后感
2015/06/10 职场文书
四大名著读书笔记
2015/06/25 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL
基于Python实现nc批量转tif格式
2022/08/14 Python