通过一个简单的例子学会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 相关文章推荐
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
javascript中的正则表达式使用指南
Mar 01 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
Dec 12 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
jQuery自动或手动图片切换效果
Oct 11 jQuery
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
JQuery Ajax执行跨域请求数据的解决方案
Dec 10 jQuery
JS三级联动代码格式实例详解
Dec 30 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投票程序源码
2007/03/11 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
js小数运算出现多位小数如何解决
2015/10/08 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
Dropzone.js实现文件拖拽上传功能(附源码下载)
2016/11/22 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
vue项目实现github在线预览功能
2018/06/20 Javascript
基于JavaScript实现贪吃蛇游戏
2020/03/16 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
javascript实现搜索筛选功能实例代码
2020/11/12 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
详解Python中for循环的使用方法
2015/05/14 Python
Python 装饰器深入理解
2017/03/16 Python
Django的分页器实例(paginator)
2017/12/01 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
PyTorch 随机数生成占用 CPU 过高的解决方法
2020/01/13 Python
python无序链表删除重复项的方法
2020/01/17 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
AmazeUI框架搭建的方法步骤(图文)
2020/08/17 HTML / CSS
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
实习自我鉴定模板
2013/09/28 职场文书
出纳岗位职责模板
2013/11/27 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
欢迎标语大全
2014/06/21 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
公司承诺函范文
2015/01/21 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL