Vuex 进阶之模块化组织详解

网友投稿 277 2023-02-27


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 组件内用到的 statebqzmmZZlN 、 getters 、 actions 和 mutations,并最后统一导出(类似上个例子中的 store.js )

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

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

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

1. 在 main.js 中http://导入 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

}

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 './acbqzmmZZlNtions'

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 文件不作任何修改

{{count}}

{{isEvenOrOdd}}

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

vuex模块化.gif


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:详解如何在react中搭建d3力导向图
下一篇:Spring Security Oauth2.0 实现短信验证码登录示例
相关文章

 发表评论

暂时没有评论,来抢沙发吧~