Vuex模块化应用实践示例
人气:0Vuex作为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中,并且每当窗口被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中的数据,这样做会有两个问题:
- 破坏了vuex的数据传递规则,如果想修改state中的数据只能通过提交一个mutation
- 控制台报错:计算属性没有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再重新看文档的时候会有很多收获。希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:
- Vuex的API文档说明详解
- 浅谈vuex为什么不建议在action中修改state
- vuex+axios+element-ui实现页面请求loading操作示例
- 一看就会的vuex实现登录验证(附案例)
- Vue-CLI与Vuex使用方法实例分析
- Vuex实现数据共享的方法
- 使用vuex较为优雅的实现一个购物车功能的示例代码
- VUEX-action可以修改state吗
- vue-router结合vuex实现用户权限控制功能
- 解决vuex数据异步造成初始化的时候没值报错问题
- VUEX 数据持久化,刷新后重新获取的例子
- 实现vuex与组件data之间的数据同步更新方式
- vuex管理状态 刷新页面保持不被清空的解决方案
- vuex实现数据状态持久化
- vuex存储token示例
- Vuex实现数据增加和删除功能
- VUE:vuex 用户登录信息的数据写入与获取方式
- Vue的状态管理vuex使用方法详解
加载全部内容