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


Posted in Javascript onNovember 22, 2017

前言

Vuex 强调使用单一状态树,即在一个项目里只有一个 store,这个 store 集中管理了项目中所有的数据以及对数据的操作行为。但是这样带来的问题是 store 可能会非常臃肿庞大不易维护,所以就需要对状态树进行模块化的拆分。

这篇文章预设你已经了解vue相关的基础知识,因此本文不再赘述。需要学习的朋友可以参考这篇文章:https://3water.com/article/110212.htm

对vuex的定位和解释可以看官方文档,说的很详细了,需要的朋友也可以通过这篇文章进行详细的了解:https://3water.com/article/111582.htm

本文主要从实用的角度写一写如何在实际项目中使用vuex,例子真的很简单(简陋),但是主要是理解这种思维就好。

示例教程

例子是在vue-cli基础上构建的,以下是src文件下的内容目录。

├── App.vue
├── components // 组件文件夹
│ ├── tab1.vue
│ ├── tab2.vue
│ ├── tab3.vue
│ └── tab4.vue
├── main.js // vue的主文件入口
├── router // vue-router文件
│ └── index.js
└── store // vuex文件
 ├── action.js // action
 ├── getter.js // getter
 ├── index.js // vuex的主文件
 ├── module // 模块文件
 │ ├── tab2.js
 │ └── tab3.js
 ├── mutation-type.js // mutation常量名文件
 └── mutation.js // mutation

效果是这样的(不要嫌弃简陋啊啊啊)

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

在这个例子里,把文档里提到的vuex的相关知识都使用了一遍,包括模块相关的知识,基本把一般的使用场景都覆盖了吧。

那不废话了,开始吧。

首先app.vue和router两部分是和路由相关,就是很简单的东西,看看文档就能了解。

vuex的模块化

在写这个例子之前看了很多的开源项目的代码,一开始蛮新鲜的,毕竟之前项目中并没有深度使用过vuex,基本就是一个store.js里把vuex的功能就都完成了,但是项目复杂肯定不能这么写,正好现在有这个需求,我就想写个例子理一理这方面的思路。结果还是蛮简单的。

store文件里的内容就是按照vuex五个核心概念建立的,这么做的好处对于梳理业务逻辑和后期维护都是极大的方便,比如mutation.js和mutation-type.js这两个文件:

// mutation-type.js

const CHANGE_COUNT = 'CHANGE_COUNT';


export default {
 CHANGE_COUNT
}
// mutation.js

import type from './mutation-type'

let mutations = {
 [type.CHANGE_COUNT](state) {
 state.count++
 }
}

export default mutations

将mutation中的方法名单独作为常量提取出来,放在单独的文件中,用的时候引用相关的内容,这样非常便于管理和了解有哪些方法存在,很直观。另一方面,有时候可能需要用到action,可以使用相同的方法名,只要再引入常量的文件就行。

// action.js
import type from './mutation-type'

let actions = {
 [type.CHANGE_COUNT]({ commit }) {
 
 commit(type.CHANGE_COUNT)
 
 }
}

export default actions

怎么样,这样是不是看起来就没有写在一个文件里那么乱了。

...mapGetters和...mapActions

tab1.vue里:

// tab1.vue
<template>
 <div>
 <p>这是tab1的内容</p>
 <em @click="add">{{count}}</em>
 <p>getter:{{NewArr}}</p>
 </div>
</template>


<script>
import { mapActions, mapGetters } from "vuex";
import type from "../store/mutation-type";
export default {
 computed: {
 ...mapGetters([
 'NewArr'
 ]),
 count: function() {
 return this.$store.state.count;
 },
 },
 methods: {
 ...mapActions({
 CHANGE_COUNT: type.CHANGE_COUNT
 }),
 add: function() {
 this.CHANGE_COUNT(type.CHANGE_COUNT);
 }
 }
};
</script>

<style lang="" scoped>

</style>

index.js文件里:

import Vuex from 'vuex'
import Vue from 'vue'
import actions from './action'
import mutations from './mutation'
import getters from './getter'
import tab2 from './module/tab2'
import tab3 from './module/tab3'

Vue.use(Vuex)

let state = {
 count: 1,
 arr:[]
}


let store = new Vuex.Store({
 state,
 getters,
 mutations,
 actions,
 modules:{
 tab2,tab3
 }
 
})

export default store

vuex提供了一种叫做辅助函数的东西,他的好处能让你在一个页面集中展示一些需要用到的东西,并且在使用的时候也可以少写一些内容,不过这个不是必须,根据自己需要取用。

需要说明的是,他们两个生效的地方可不一样。

...mapGetters写在本页面的计算属性中,之后就可以像使用计算属性一样使用getters里的内容了。

...mapActions写在本页面的methods里面,既可以在其他方法里调用,甚至可以直接写在@click里面,像这样:

<em @click="CHANGE_COUNT">{{count}}</em>

酱紫,tab1里面的数字每次点击都会自增1。

mudule

vuex的文档里对于模块这部分写的比较模糊,还是得自己实际使用才能行。

在本例子中,我设置了两个模块:tab2和tab3,分别对应着同名的两个组件,当然,我这样只是为了测试,实际看tab2就可以。

// module/tab2.js
const tab2 = {
 state: {
 name:`这是tab2模块的内容`
 },
 mutations:{
 change2(state){
  state.name = `我修改了tab2模块的内容`
 }
 },
 getters:{
 name(state,getters,rootState){
  console.log(rootState)
  return state.name + ',使用getters修改'
 }
 }
}

export default tab2;
// tab2.vue
<template>
 <div>
 <p>这是tab2的内容</p>
 <strong @click="change">点击使用muttion修改模块tab2的内容:{{info}}</strong>
 <h4>{{newInfo}}</h4>
 </div>
</template>


<script>
export default {
 mounted() {
 // console.log(this.$store.commit('change2'))
 },
 computed: {
 info: function() {
 return this.$store.state.tab2.name;
 },
 newInfo(){
 return this.$store.getters.name;
 }
 },
 methods: {
 change() {
 this.$store.commit('change2')
 }
 }
};
</script>

<style lang="" scoped>

</style>

这个例子里主要是看怎么在页面中调用模块中的stated等。

首先说state,这个很简单,在页面中这样写就行:

this.$store.steta.tab2(模块名).name

在本页面的mounted中console一下$store,可以看到模块中,stete加了一层嵌套在state中的。

至于action,mutation,getter,和一般的使用方法一样,没有任何区别。

还有就是,在getter和action中,可以通过rootState获得根结构的state,mutation中没有此方法。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
一个简单的弹性返回顶部JS代码实现介绍
Jun 09 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
js实现异步循环实现代码
Feb 16 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
Vue源码解析之数组变异的实现
Dec 04 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
第一个Vue插件从封装到发布
Nov 22 #Javascript
详细分析单线程JS执行问题
Nov 22 #Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 #jQuery
Angular实现双向折叠列表组件的示例代码
Nov 21 #Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 #Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 #Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 #Javascript
You might like
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
php之字符串变相相减的代码
2007/03/19 PHP
LotusPhp笔记之:Logger组件的使用方法
2013/05/06 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
深入理解PHP内核(一)
2015/11/10 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
2015/07/01 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
详解vue渲染函数render的使用
2017/12/12 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
jQuery Migrate 插件用法实例详解
2019/05/22 jQuery
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
python基础教程之循环介绍
2014/08/29 Python
python动态性强类型用法实例
2015/05/09 Python
Python基础之函数的定义与使用示例
2019/03/23 Python
计算机二级python学习教程(3) python语言基本数据类型
2019/05/16 Python
简单了解python反射机制的一些知识
2019/07/13 Python
Python 使用多属性来进行排序
2019/09/01 Python
python中class的定义及使用教程
2019/09/18 Python
python支持多线程的爬虫实例
2019/12/21 Python
python Canny边缘检测算法的实现
2020/04/24 Python
python 带时区的日期格式化操作
2020/10/23 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
珍惜资源保护环境的建议书
2014/05/14 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
老公出轨后的保证书
2015/05/08 职场文书
世界名著读书笔记
2015/06/25 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB