详解如何更好的使用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中获取选中对象的类型
Apr 02 Javascript
flash javascript之间的通讯方法小结
Dec 20 Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
js+html制作简单验证码
Feb 16 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
详解Vue中组件传值的多重实现方式
Aug 16 Javascript
js键盘事件实现人物的行走
Jan 17 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 strtotime函数详解
2009/12/18 PHP
php下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
jQuery get和post 方法传值注意事项
2009/11/03 Javascript
让Firefox支持event对象实现代码
2009/11/07 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
JavaScript中的数组特性介绍
2014/12/30 Javascript
JQuery中Bind()事件用法分析
2015/05/05 Javascript
如何实现移动端浏览器不显示 pc 端的广告
2015/10/15 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
2018/09/05 jQuery
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
js实现秒表计时器
2019/12/16 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
python对json的相关操作实例详解
2017/01/04 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
Python 画出来六维图
2019/07/26 Python
python爬虫解决验证码的思路及示例
2019/08/01 Python
numpy ndarray 取出满足特定条件的某些行实例
2019/12/05 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
一份报关员的职业规划范文
2014/01/08 职场文书
管理专员自荐信
2014/01/26 职场文书
超市重阳节活动方案
2014/02/10 职场文书
房屋委托书范本
2014/04/04 职场文书
明信片寄语大全
2014/04/08 职场文书
廉洁教育学习材料
2014/05/19 职场文书
本科应届生自荐信
2014/06/29 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python