Vuex的模块化拆解

Vuex 进级之模块化协会精解,vuex模块化

上上篇:Vuex 入门

上一篇:Vuex 提升

图片 1

自制vuex LOGO

前两篇讲明了朝气蓬勃晃 Vuex
的骨干选拔方法,可是在实质上项目中那么写一定是不客观的,要是组件太多,不恐怕把装有组件的数据都放置贰个store.js 中的,所以就需求模块化的团体 Vuex,首先看一下 项目组织。

 图片 2

种类布局

黄金年代、首先实行以下命令:

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

二、根据上海体育场所布局创建文件目录

图片 3

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

图片 4

骨干概念

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>

最后,摄人心魄的时候到了,笔者那费半天劲的事物到底能或不能够跑起来

图片 5

vuex模块化.gif

对此新手们来讲,光是看一遍只怕很难明白那几个进度,仍然要亲身多试黄金时代试的,以上正是本文的全体内容,希望对我们的上学抱有利于,也期待大家多多照拂帮客之家。

进级之模块化组织安详严整,vuex模块化
上上篇:Vuex 入门 上生龙活虎篇:Vuex 升高 自制vuex LOGO 前两篇批注了一下 Vuex
的核心接受方法,可是在实…

上次已经说了Vuex的为主使用情势
本次来讲下Vuex的模块化拆解,小编个人挺心仪那样,方便维护

  • app.vue

图片 6

01.png

  • main.js

图片 7

02.png

  • ./store/index.js

图片 8

02.png

  • actions.js

图片 9

05.png

  • mutations.js

图片 10

07.png

  • getters.js

图片 11

09.png

-state.js

图片 12

08.png

相关文章