vueX 模块封装
时间:2020-07-12
本文章向大家介绍vueX 模块封装,主要包括vueX 模块封装使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
闲下来的周末真的无聊,早上五点半睡不着了,在B站逛了一圈之后六点过二十分钟。记录一下公司项目中涉及到的vueX里面全局属性模块化封装吧。
说到这个封装,我也不太清楚是不是公司里面前端大佬自己写的还是element-admin中自带的。先看一个例子吧:
首先在store目录下新建modules层用来存储每个模块的全局属性(这里只建立一个user模块,目录结构如下):
user.js
const state = {
user: {},
login: false
}
const mutations = {
userInfo: (state, user) => {
state.user = user
},
userLogin: (state, isLogin) => {
state.login = isLogin
}
}
export default {
namespaced: true,
state,
mutations
}
之后在 store 下面来建立 getters.js 匹配 modules 下面的所有属性:
const getters = {
user: state => state.user.user,
hasLogin: state => state.user.login
}
export default getters
最后在 index.js 文件夹下面,引入 getters.js 中的属性以及 modules 下面全局属性模块
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
console.log(modules)
const store = new Vuex.Store({
modules,
getters,
mutations: {
}
})
export default store
最后我们在一个页面进行测试
<template>
<div class="wrapper">
<div>
<button @click="btn_user">用户</button>
</div>
</div>
</template>
<script>
import { mapMutations, mapState } from 'vuex'
export default {
components: {},
props: {},
data () {
return {
}
}
computed: mapState({
User: state => state.user.user,
Login: state => state.user.login
}),
methods: {
...mapMutations('user', ['userInfo', 'userLogin']),
btn_user () {
this.userInfo('buding')
this.userLogin(true)
console.log(this.$store)
}
}
}
</script>
最后看一下结果:
这是在 index.js中打印的modules
这是打印的this.$store
总的来说,在使用的全局属性比较少,或者项目开发中的模块比较少的情况下这样做确实很麻烦,但是在项目很大或者模块很多的时候,这样做无疑有很大的优点。
原文地址:https://www.cnblogs.com/budingbuding/p/13286928.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法