Vuex 进阶之模块化组织详解

上上篇:Vuex 入门

上一篇:Vuex 提升

自制vuex LOGO

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

项目结构

一、首先执行以下命令:

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

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

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 对象进行导出

核心概念

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模块化.gif

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

您可能感兴趣的文章:

  • Vuex模块化实现待办事项的状态管理
  • 深入理解Vuex 模块化(module)
  • 通过一个简单的例子学会vuex与模块化
(0)

相关推荐

  • 深入理解Vuex 模块化(module)

    一.为什么需要模块化 前面我们讲到的例子都在一个状态树里进行,当一个项目比较大时,所有的状态都集中在一起会得到一个比较大的对象,进而显得臃肿,难以维护.为了解决这个问题,Vuex允许我们将store分割成模块(module),每个module有自己的state,mutation,action,getter,甚至还可以往下嵌套模块,下面我们看一个典型的模块化例子 const moduleA = { state: {....}, mutations: {....}, actions: {....},

  • Vuex模块化实现待办事项的状态管理

    前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸组件再告诉B.当组件比较多,要互相通讯的事情很多的话,爸组件要管他们那么多事,很累的.vuex正是为了解决这个问题,让多个子组件之间可以方便的通讯. 项目介绍 待办事项中的一个事件,它可能拥有几个状态,未完成.已完成.已取消或被删除等.这个事件需要在这多种状态之间切换,那么使用vuex来管理也是非常

  • 通过一个简单的例子学会vuex与模块化

    前言 Vuex 强调使用单一状态树,即在一个项目里只有一个 store,这个 store 集中管理了项目中所有的数据以及对数据的操作行为.但是这样带来的问题是 store 可能会非常臃肿庞大不易维护,所以就需要对状态树进行模块化的拆分. 这篇文章预设你已经了解vue相关的基础知识,因此本文不再赘述.需要学习的朋友可以参考这篇文章:http://www.jb51.net/article/110212.htm 对vuex的定位和解释可以看官方文档,说的很详细了,需要的朋友也可以通过这篇文章进行详细的

  • Vuex 进阶之模块化组织详解

    上上篇:Vuex 入门 上一篇:Vuex 提升 自制vuex LOGO 前两篇讲解了一下 Vuex 的基本使用方法,可是在实际项目中那么写肯定是不合理的,如果组件太多,不可能把所有组件的数据都放到一个 store.js 中的,所以就需要模块化的组织 Vuex,首先看一下 项目结构. 项目结构 一.首先执行以下命令: vue init webpack-simple vuex-demo cd vuex-demo npm install npm install vuex -S npm run dev

  • vuex管理状态仓库使用详解

    一.什么是Vuex?  Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能.采用了全局单例模式,将组件的共享状态抽离出来管理,使得组件树中每一个位置都可以获取共享的状态或者触发行为.  那么什么是状态呢?我把状态理解为在没有使用vu

  • Java进阶之SPI机制详解

    一.前言 SPI的英文全称为Service Provider Interface,字面意思为服务提供者接口,它是jdk提供给"服务提供厂商"或者"插件开发者"使用的接口. 在面向对象的设计中,模块之间我们一般会采取面向接口编程的方式,而在实际编程过程过程中,API的实现是封装在jar中,当我们想要换一种实现方法时,还要生成新的jar替换以前的实现类.而通过jdk的SPI机制就可以实现,首先不需要修改原来作为接口的jar的情况下,将原来实现的那个jar替换为另外一种实

  • Python进阶-函数默认参数(详解)

    一.默认参数 python为了简化函数的调用,提供了默认参数机制: def pow(x, n = 2): r = 1 while n > 0: r *= x n -= 1 return r 这样在调用pow函数时,就可以省略最后一个参数不写: print(pow(5)) # output: 25 在定义有默认参数的函数时,需要注意以下: 必选参数必须在前面,默认参数在后: 设置何种参数为默认参数?一般来说,将参数值变化小的设置为默认参数. python标准库实践 python内建函数: prin

  • vue.js的状态管理vuex中store的使用详解

    一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为

  • java编程小白进阶包的作用详解

    目录 步骤 1  工具包里面有很多个工具类 步骤 2  StringUtil 步骤 3  目前的情况 步骤 4  CLASSPATH 步骤 5  具体配置 步骤 6  package 步骤 7  验证 步骤 8  亲自做一遍 步骤 9  为什么现在用Editplus运行报错了? 步骤 10  说白了 步骤 11  包的作用 包的作用,1是为了防止类和方法的重名,2是为了管理众多的java类. 步骤 1  工具包里面有很多个工具类 之前讲了打印数据的方法:System.out.println,写这

  • 微服务架构设计RocketMQ进阶事务消息原理详解

    目录 前言 RocketMQ事务流程概要 RocketMQ事务流程关键 实现 基础配置 引入组件 添加配置 发送半消息 执行本地事务与回查 消费消息 测试 总结 前言 分布式消息选型的时候是否支持事务消息是一个很重要的考量点,而目前只有RocketMQ对事务消息支持的最好.今天我们来唠唠如何实现RocketMQ的事务消息! Apache RocketMQ在4.3.0版中已经支持分布式事务消息,这里RocketMQ采用了2PC的思想来实现了提交事务消息,同时增加一个补偿逻辑来处理二阶段超时或者失败

  • Oracle进阶DECODE函数使用详解

    DECODE含义 decode(条件,值1,返回值1,值2,返回值2,-值n,返回值n,缺省值) 这个是decode的表达式,具体的含义解释为: IF 条件=值1 THEN RETURN(翻译值1) ELSIF 条件=值2 THEN RETURN(翻译值2) ...... ELSIF 条件=值n THEN RETURN(翻译值n) ELSE RETURN(缺省值) END IF DECODE的用法 这里主要说的就是decode的用法,在很多时候这个函数还是很有用的. 1.翻译值 数据截图: 需求

  • C语言进阶栈帧示例详解教程

    目录 正片开始 栈有什么用? 寄存器 main函数创建 局部变量创建 函数部分 形参与实参 正片开始 今天来讲讲我对栈帧创建与销毁的拙见.理解什么是栈帧首先知道什么是栈: 在数据结构中, 栈是限定仅在表尾进行插入或删除操作的线性表.栈是一种数据结构,它按照后进先出的原则存储数据,先进入的数据被压入栈底,最后的数据在栈顶,需要读数据的时候从栈顶开始弹出数据. 栈有什么用? 在计算机系统中,栈也可以称之为栈内存是一个具有动态内存区域,存储函数内部(包括main函数)的局部变量和方法调用和函数参数值,

  • vuex中Modules的使用详解

    目录 前言 1 .什么是模块Modules 2.模块内部参数问题 3.模块命名空间问题 (1)namespaced: true 使模块成为带命名空间的模块 (2)带命名空间的绑定函数的使用 4.模块动态注册 写在最后 前言 在Vue中State使用是单一状态树结构,应该的所有的状态都放在state里面,如果项目比较复杂,那state是一个很大的对象,store对象也将对变得非常大,难于管理.于是Vuex中就存在了另外一个核心概念 modules.本文就来总结 modules 相关知识点. 1 .

随机推荐