详解如何更好的使用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 相关文章推荐
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
js实现同一个页面多个渐变效果的方法
Apr 10 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
Feb 22 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
vue如何使用外部特殊字体的操作
Jul 30 Javascript
JavaScript手写数组的常用函数总结
Nov 22 Javascript
如何在JavaScript中等分数组的实现
Dec 13 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
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
js数组去重的5种算法实现
2015/11/04 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
Vue组件化通讯的实例代码
2017/06/23 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
Python+Opencv识别两张相似图片
2020/03/23 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Python3 assert断言实现原理解析
2020/03/02 Python
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
毕业自荐信
2013/12/16 职场文书
市场部规章制度
2014/01/24 职场文书
打造高效课堂实施方案
2014/03/22 职场文书
护理目标管理责任书
2014/07/25 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
小学英语复习计划
2015/01/19 职场文书
社会实践活动报告
2015/02/05 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
利用python做数据拟合详情
2021/11/17 Python