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 相关文章推荐
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
JavaScript中toString()方法的使用详解
Jun 05 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
Oct 09 Javascript
Vue.js第二天学习笔记(vue-router)
Dec 01 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
JS数组方法reduce的用法实例分析
Mar 03 Javascript
Node.js web 应用如何封装到Docker容器中
Sep 01 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重新实现PHP脚本引擎内置函数
2007/03/06 PHP
Discuz板块横排显示图片的实现方法
2007/05/28 PHP
PHP $_FILES函数详解
2011/03/09 PHP
php一个找二层目录的小东东
2012/08/02 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
JavaScript重定向URL参数的两种方法小结
2016/10/19 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
微信小程序音乐播放器开发
2019/11/20 Javascript
js模拟实现烟花特效
2020/03/10 Javascript
js实现扫雷源代码
2020/11/27 Javascript
python正则表达式re之compile函数解析
2017/10/25 Python
python中hashlib模块用法示例
2017/10/30 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
python实现Decorator模式实例代码
2018/02/09 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Django在admin后台集成TinyMCE富文本编辑器的例子
2019/08/09 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python正则表达式re.match()匹配多个字符方法的实现
2021/01/27 Python
美国时尚在线:Showpo
2017/09/08 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
实习单位推荐信范文
2013/11/27 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
先进事迹演讲稿
2014/09/01 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server