详解如何更好的使用module vuex


Posted in Javascript onMarch 27, 2019

一、 前言

在项目如何使用vuex呢?以前我都是非模块末去写的,可能大家和我一样也是这么去写,但是回过头去看看vue的文档,发现模块化去使用vuex更好,vue是单页面应用,其实只有一个页面,那么首页也好列表页也好,那都相当于这一个页面的一个模块,也可以把它理解为是一个一个的组件,毕竟组件化、组件抽离、组件封装是比较火的,所以在使用vuex的模块化的时候就能更好的去管理对应的模块,对于数据分离和定位都非常的好。废话有点多,先丢张图。

Demo连接: https://github.com/cookie-zhang/vuex_Demo

详解如何更好的使用module vuex

通信之间还是比较麻烦的,所以诞生了vuex。

二、 啥是vuex?

有人说是一个插件、有人说是一个仓库。官方说的就比较好理解,Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式 。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。其实它就是对vue做数据管理的,更好的存储数据、相应数据。

三、 什么时候最适合使用vuex?

应用官方语言:Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的store模式就足够您所需了,但是,如果您需要构建一个大型单页应用,您很可能会考虑如何更好的在组件外部管理状态,Vuex将会成为自然选择。

四、 由图讲原理

详解如何更好的使用module vuex

四大核心模块:

  • state: 翻译:状态,state其实是数据状态管理对象,在这里你可以初始化一些你想要的数据。
  • getter: 翻译: 获得者,getter是对state的数据对象的读取,getters从表面是获得的意思,可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。getters就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算
  • Actions:翻译:行动,Actions里面我们可以定义我们想执行异步的方法,在这里它并不会立即去执行,而是在页面中去dispatch这个方法,提交mutations,而不是直接去改变状态,在页面中有两种方式去做派发,第一种  this.$store.dispatch('xxx') 第二种 可以使用mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用(Demo中有体现)
  • mutations:翻译: 突变,mutations里面可写很多的改变状态的方法,也就是像翻译一样,可以改变state里面的数据,试讲state的里面数据发生改变的唯一方式。

五、上Demo

初始化项目就不讲了,根据文档一步一步生成就可以了

目录结构:

详解如何更好的使用module vuex

页面展示

详解如何更好的使用module vuex

详解如何更好的使用module vuex

模块化数据

首先在store里面创建modudel文件夹,分别创建homeDataStore.js和listDataStore.js,这两个模块就是分别存储对应页面的数据,以上页面展示可以看到我只在list页面写了数据,所以我们就把list页面座位例子来讲。

listDataStore.js代码展示

import axios from 'axios'
const listData = {
  namespaced:true,//注意 模块化管理数据请不要忘了命名空间的开启
  state:{
    List:[],
    count: 0,
    compoentData:[],
    number: 0

  },
  actions:{
    getListData(context){
      new Promise((resolve,reject)=>{
        axios.get('../../../static/listData.json').then((res)=>{
          context.commit('ListData',{'listDatas': res.data.listData})
        })
      })
    },
    handleAdd(context){
      context.commit("handleAddState")
    }
  
  },
  mutations:{
    ListData(state, paylod){
      state.List = paylod.listDatas
    },
    handleAddState(state){
      state.number++;
    }
  },
  getters: {
    List: state => state.List,
    count: state => state.count,
    number: state => state.number
  }
}
export default listData;

数据格式是一样的,每个页面都是这四大核心模块组成

store文件夹下面的index.js文件展示

//这个是总的store,抛出各个模块的store
import Vue from 'vue'
import Vuex from 'vuex'
import homeData from './moudel/homeDataStore'
import listData from './moudel/listDataStore'
Vue.use(Vuex)
const store = new Vuex.Store({  
modules:{ 
    homeData,
    listData,
  }})export default store;

在这里引入各个模块的数据。

main.js文件展示

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({ 
 el: '#app', 
router, 
store, 
render: h => h(App)
})

引入store,将store注册到vue的实例上面,这样对应模块的数据基本格式是这样,接下来在看看页面中怎么调用的吧。

页面使用store数据  列表页展示

<template>
 <div> 
<router-link to='/'> 首页home</router-link><br/>
这是列表页list<br/>
<ul> 
<li v-for="item in List" v-bind:key="item.id">{{item.item}}</li> 
</ul>    
 <div>计算:</div>
    <div>{{number}}</div>
    <button @click='handleAdd()'>add</button> 
  </div></template><script>
import { mapGetters, mapActions } from 'vuex'
export default {  
name: 'list',
data(){    
return{}  
},  
computed:{    
  ...mapGetters('listData',['List','number'])  
},  
methods:{    
 //方法一: ...mapActions('listData',['getListData','handleAdd']),    
  //方法二:    
  ...mapActions({      
   getListData:"listData/getListData",      
   handleAdd:"listData/handleAdd"    
})  
},  
mounted(){    
  this.getListData();  
}}
</script>
<style></style>

引入import { mapGetters, mapActions } from 'vuex' 辅助函数,在computed计算属性里面把对应页面的数据也就是列表页对应的列表页的store拿到List number,也可以认为是读取里面的数据,将数据映射到页面来,这样就拿到了响应的数据,methods里面是映射到页面的方法,比如getListData方法就是走接口请求过来的数据,当页面加载完后调用,也就是在mounted。handleAdd方法也是派发,在对应的actions里面可以看到。如果不用辅助函数,也就会用到dispatch,这里没在细讲

demo地址: https://github.com/cookie-zhang/vuex_Demo

六 总结

以上描述简单易懂,可以在项目中直接使用这种模块化管理数据的方式,总体来看就更好的理解vux的流程图,单向数据流连通起来就可以形成一个完美的闭环。 没有太多文采,只想用最近单易懂的语言描述自己的理解,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
js使用正则实现ReplaceAll全部替换的方法
Jul 18 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
Position属性之relative用法
Dec 14 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
AngularJs  Understanding Angular Templates
Sep 02 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
vue中的inject学习教程
Apr 24 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
原生js实现获取form表单数据代码实例
Mar 27 #Javascript
JQueryDOM之样式操作
Mar 27 #jQuery
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 #Javascript
Node.js 多线程完全指南总结
Mar 27 #Javascript
浅谈JS和jQuery的区别
Mar 27 #jQuery
Nginx设置为Node.js的前端服务器方法总结
Mar 27 #Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 #Javascript
You might like
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
CentOS 6.2使用yum安装LAMP以及phpMyadmin详解
2013/06/17 PHP
解析php取整的几种方式
2013/06/25 PHP
常见PHP数据库解决方案分析介绍
2015/09/24 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
2016/05/26 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
2017/11/07 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
js函数和this用法实例分析
2020/03/13 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
利用python画出AUC曲线的实例
2020/02/28 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
Python读写压缩文件的方法
2020/07/30 Python
Python中Selenium模块的使用详解
2020/10/09 Python
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
餐饮部总监岗位职责范文
2014/02/13 职场文书
cf战队收人广告词
2014/03/14 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
python基础之类方法和静态方法
2021/10/24 Python
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫