通过一个简单的例子学会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 相关文章推荐
关于Blog顶部的滚动导航条代码
Sep 25 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
javascript实用方法总结
Feb 06 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
javascript数组去重小结
Mar 07 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
vue中页面跳转拦截器的实现方法
Aug 23 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
原生js实现随机点名功能
Nov 05 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 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
php include和require的区别深入解析
2013/06/17 PHP
php文件操作相关类实例
2015/06/18 PHP
yii,CI,yaf框架+smarty模板使用方法
2015/12/29 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
php面向对象重点知识分享
2019/09/27 PHP
为你的 Laravel 验证器加上多验证场景的实现
2020/04/07 PHP
PHPExcel实现的读取多工作表操作示例
2020/04/14 PHP
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
2020/07/17 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
python自动裁剪图像代码分享
2017/11/25 Python
使用python实现knn算法
2017/12/20 Python
python计算两个地址之间的距离方法
2018/06/09 Python
Python for循环生成列表的实例
2018/06/15 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
Anaconda下配置python+opencv+contribx的实例讲解
2018/08/06 Python
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
小学语文教学反思
2014/02/10 职场文书
师范生自我鉴定
2014/03/20 职场文书
土地转让协议书
2014/04/15 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
求职信范文大全
2014/05/26 职场文书
银行奉献演讲稿
2014/09/16 职场文书
酒店仓管员岗位职责
2015/04/01 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
mysql中varchar类型的日期进行比较、排序等操作的实现
2021/11/17 MySQL
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技