Vuex 进阶之模块化组织详解


Posted in Javascript onJanuary 12, 2018

上上篇:Vuex 入门

上一篇:Vuex 提升

Vuex 进阶之模块化组织详解

自制vuex LOGO

前两篇讲解了一下 Vuex 的基本使用方法,可是在实际项目中那么写肯定是不合理的,如果组件太多,不可能把所有组件的数据都放到一个 store.js 中的,所以就需要模块化的组织 Vuex,首先看一下 项目结构。

 Vuex 进阶之模块化组织详解

项目结构

一、首先执行以下命令:

vue init webpack-simple vuex-demo
cd vuex-demo
npm install
npm install vuex -S
npm run dev

二、按照上图结构创建文件目录

Vuex 进阶之模块化组织详解

Vuex 模块化目录

三、编写文件

我们就延用上两篇文章中的例子。先说一个各个文件的作用

types.js 内定义常量,使用常量替代 mutation 事件类型

user.js 内写该 user 组件内用到的 state 、 getters 、 actions 和 mutations,并最后统一导出(类似上个例子中的 store.js )

getters.js 内写原来的 getters ,用来获取属性

actions.js 内写原来的 actions ,就是要执行的动作,如流程的判断、异步请求

index.js 是用来组装 actions.js 、 getters.js 、user.js 的,然后进行统一的导出

1. 在 main.js 中导入 index.js 文件并注册

import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'

new Vue({
 store,
 el: '#app',
 render: h => h(App)
})

2. 在 types.js 内定义 常量 并导出,默认全部大写

// 定义类型常量,默认全部大写
const INCREMENT = 'INCREMENT'
const DECREMENT = 'DECREMENT'

export default {
  INCREMENT,
  DECREMENT
}

注意:把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然。用不用常量取决于你——在需要多人协作的大型项目中,这会很有帮助。但如果你不喜欢,你完全可以不这样做。

3. user.js 内写该 user 组件内用到的 state 、 getters 、 actions 和 mutations

// 导入 types.js 文件
import types from "./../types";

const state ={
  count:5
}

// 定义 getters
var getters ={
  count(state){
    return state.count
  }
}

const actions ={
  increment({ commit, state }){
    // 此处提交的事件与下方 mutations 中的 types.INCREMENT 对应,与原来 commit('increment') 的原理相同,只是把类型名换成了常量
    commit(types.INCREMENT)
  },
  decrement({commit,state}){
    if (state.count>10) {
      // 此处提交的事件与下方 mutations 中的 types.DECREMENT 对应
      commit(types.DECREMENT)
    }
  }
}

const mutations ={
  // 此处的事件为上方 actions 中的 commit(types.INCREMENT)
  [types.INCREMENT](state){
    state.count++
  },
  // 此处的事件为上方 actions 中的 commit(types.DECREMENT)
  [types.DECREMENT](state){
    state.count--
  }
}
// 最后统一导出
export default {
  state,
  getters,
  actions,
  mutations
}

注意:上方 mutations 中的 [types.INCREMENT] 写法,因为 types.INCREMENT 是一个对象,所以不能直接当做一个函数名来写,需要用到 ES2015 风格的计算属性命名功能来使用一个常量作为函数名,方能正常使用,原来的写法为:

const mutations ={
  increment(state){
    state.count ++;
  }
}

4. getters.js 内写原来的判断奇偶数方法

// 因为数据从 user.js 中获取,所以需要引入该文件
import user from './modules/user'

const getters = {
  isEvenOrOdd(state){
    // 注意数据是从 user.js 中获取的,所以写成 user.state.count
    return user.state.count % 2 == 0 ? "偶数" : "奇数"
  }
}
// 并导出
export default getters;

5. actions.js 内写原来的异步操作

// 异步操作中需要用到 increment 方法,所以需要导入 types.js 文件
import types from './types'
const actions= {
  incrementAsync({ commit, state }) {
    // 异步操作
    var p = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 3000);
    });
    p.then(() => {
      commit(types.INCREMENT);
    }).catch(() => {
      console.log('异步操作');
    })
  }
}
// 最后导出
export default actions;

6. 在 index.js 中组装 actions.js 、 getters.js 、user.js 的,然后统一导出

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import getters from './getters'
import actions from './actions'
import users from './modules/user'
// 导出 store 对象
export default new Vuex.Store({
  getters,
  actions,
  modules:{
    users
  }
})

注意:在导出 store 对象时,因为 getters 和 actions 在 vuex 的核心概念中有默认,可以直接写入。但是 users 不是默认的,所以用到 vuex 中的 modules 对象进行导出

Vuex 进阶之模块化组织详解

核心概念

7. Vue.app 文件不作任何修改

<template>
 <div id="app">
  <button @click="increment">增加</button>
  <button @click="decrement">减少</button>
  <button @click="incrementAsync">延时增加</button>
  <p>{{count}}</p>
  <p>{{isEvenOrOdd}}</p>
 </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
 name: 'app',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 },
 computed:mapGetters([
  'count',
  'isEvenOrOdd'
 ]),
 methods:mapActions([
  'increment',
  'decrement',
  'incrementAsync'
 ])
}
</script>

最后,惊心动魄的时候到了,我这费半天劲的东西到底能不能跑起来

Vuex 进阶之模块化组织详解

vuex模块化.gif

对于新手们来说,光是看一次可能很难理解这个过程,还是要亲自多试一试的,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
按给定几率进行随机抽取的js代码
Dec 28 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
ListBox实现上移,下移,左移,右移的简单实例
Feb 13 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
vue.js的安装方法
May 12 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
动态Axios的配置步骤详解
Jan 12 #Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 #Javascript
使用JS获取SessionStorage的值
Jan 12 #Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 #Javascript
web前端vue filter 过滤器
Jan 12 #Javascript
你可能不知道的前端算法之文字避让(inMap)
Jan 12 #Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 #Javascript
You might like
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
php include和require的区别深入解析
2013/06/17 PHP
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
2016/08/30 Javascript
JavaScript实现同一个页面打开多张图片
2016/12/29 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
JavaScript数组去重的多种方法(四种)
2017/09/19 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
python遍历数组的方法小结
2015/04/30 Python
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
python PyTorch预训练示例
2018/02/11 Python
Python3+Pycharm+PyQt5环境搭建步骤图文详解
2019/05/29 Python
python绘制地震散点图
2019/06/18 Python
python里glob模块知识点总结
2021/01/05 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
30岁生日感言
2014/01/25 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
购房委托书
2014/10/15 职场文书
二胎满月酒致辞
2015/07/29 职场文书
学生会干部任命书
2015/09/21 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
如何理解及使用Python闭包
2021/06/01 Python
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL