vue现在越来越火,不单单可以写简单的小项目,也可以写大中型的项目。但是项目大了,项目之间的数据传递就会变得复杂,那么问题来了?在一个大型项目中,多个组件要公用同一个或多个数据,我们如何保证每个组件获取到的数据都是预期对的值呢?这就要用到vuex了。

  学习一样新的东西,我的学习思路一般有三步:

    1、它是什么?

    2、它是做什么的?

    3、它有什么用处?

  下面,我们就按照以上三点,来学习一下vuex。

  一、vuex是什么

    vuex是一个专门为vue.js设计的集中式状态管理架构。如果不明白这句话,我们做一个比喻,首先我们设置一个情景:有一个村子,村子里有5户普通人家和一户村长家,村长负责管理村子里所有的粮食,每次有人家要吃饭,这家人都要先告诉村长,我们这次需要吃多少斤,然后村长称出等量的粮食交给要吃饭的这家人。这样,村长随时都知道村里粮食有多少,但是,如果突然又搬来了几十户人家,每家每次吃饭都要这样村长会很麻烦,所以呢,村长就想出一个办法,在村子里建一个仓库,把村子里所有的粮食都放进仓库里,有哪家人要吃饭了,就自己到仓库里去取,这样,村长就不用那么累了。在这个例子里,一个村子就是一个vue项目,村长就是项目的一个父组件,5户普通人家就是5个子组件,他们吃的粮食就是组件之间共同的一个数据,那么那个存放粮食的仓库就是我们所说的vuex架构。所谓的状态自然就是公用数据的状态了。简言之就是把多个组件公用的数据放到一个公用的仓库去管理,这样说不知道会不会好理解一些。

  二、vuex是做什么的

    就像上面的例子所描述的,vuex就是一个专门管理vue项目数据的一个架构,它的工作就是定义并初始化所有公用数据、定义对数据的同步和异步操作。如果有组件要使用这里的数据,直接调用定义好的操作方法即可。

  三、vuex有什么用

    之前我们说如果项目较大,数据传递复杂的情况下,我们可以使用vuex来同意管理数据状态。它的作用就是将项目的公用数据及对数据的操作封装到一个单独的管理器中,这个管理器只定义对数据有关的操作,不包含其他任何与dom或与数据无关的代码。所以从数据管理的角度来说,vuex使得数据管理更加方便明了,从使用数据的组件角度来说,也更方便快捷,如果想使用数据了,那么我直接引入并调用vuex给定的操作方法,使程序代码可读性更强。

  好,大体了解了vuex之后,我们就要看看怎么使用vuex吧!

  第一步:安装

     npm install vuex --save

  第二步:定义路径,填写内容

    

    以上目录是我在一个项目中用到的,

      state用于记录state数据的状态

      mutations用于定义数据的同步操作

      mutation-types用于映射mutation的操作, 存储mtation操作的相关常量(名)

      gettesr用于获取state中数据的状态

      actions用于定义对mutation的封装或对数据的异步操作

      index.js是vuex的入口文件,其他操作文件都要在这里引入,并赋值给store实例

      

    注意:这里在引入vuex后一定要加入这句话:Vue.use('vuex')

      

  第三步:在main.js中引入:import store from './store'

      然后挂在到vue实例上:

    

  最后:使用

    在组件中用vuex提供的语法糖mapActions,mapGetters,mapMutations等引入store方法并调用

  vuex的使用到此就结束了,另外需要注意两点:(一)vuex适用于中大型vue项目,小的项目,数据操作简单的就没必要使用vuex了

                       (二)一个应用只能有一个store实例,这个store实例要统一管理应用所有公用的数据

好了,今天就写这么多,以上都是我在写项目的时候自己的总结,如果有什么不足之处还请各位大神指正,另外别忘记关注我哦,后续还有更多知识分享,谢谢

vuex的使用的更多相关文章

  1. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  2. vuex复习方案

    这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.

  3. vuex 初体验

    vuex是vue的状态管理工具,vue进阶从es6和npm开始,es6推荐阮一峰大神的教程. vuex学习从官方文档和一个记忆小游戏开始.本着兴趣为先的原则,我先去试玩了一把-->. Vuex ...

  4. vuex(1.0版本写法)

    Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/  2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...

  5. 关于Vue vuex vux 文档

    01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex  ----->>状态管理模块儿<<------- https://vuex.vue ...

  6. vuex

    英文:(Introduction)中文:https://github.com/vuejs/vuex/issues/176(贡献者努力中)

  7. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  8. Vue2.X的状态管理vuex记录

    记住上述的顺序情况:想要改变state,只能通过Mutation,虽然action可以直接改变state,这样会使每个状态可以方便的跟踪和记录(用Devtools跟踪) vue Method   -- ...

  9. 在vue1.0遇到vuex和v-model的坑

    事情是这样的,在开发项目的过程中我使用了vuex并且在store中定义了一个保存用户信息的对象 userInfo : { 'nickName' : '', // 昵称 'password' :'', ...

  10. vuex 笔记

    Vuex 笔记 一个简单的状态管理 单一数据源: const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const ...

随机推荐

  1. Tomcat安装和目录简介

    要知道动态的网页必须要有服务器的支撑! 1.知名的java web服务器 Tomcat:Apache组织发布,免费开源的,轻量级 JBoss.WebLogic是商用的,价格较高,但相对于开源的更加稳定 ...

  2. javamelody 使用

    javamelody 扩展API如何获取监控参数 https://github.com/javamelody/javamelody/wiki/ExternalAPI#json

  3. js获取样式、currentStyle和getComputedStyle的兼容写法

    currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如backgr ...

  4. Android Studio移动鼠标显示悬浮提示的设置方法

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  5. 微信小程序开发之选项卡

    选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡 实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...

  6. 【图文】如何在centos上安装tomcat

    先到tomcat官网下载安装包(随便下载你想要的版本) 假设你现在使用的是windows系统 那么就把你下载来的压缩包解压,放到一个目录中 在你本地的windows系统中安装个xshell和xftp ...

  7. Sqlserver如何递归查询层级数据将父级字段和本级某个字段合并?如何自定义用户函数并调用?

    开门见山,首先说下遇到的问题:前期系统地区字典表中,每个省市县只存了本级名称,没存完整的字段.如:肥西县隶属安徽省合肥市,表中就存了一个肥西县.现有需求需要将完整字段显示,由于系统已在线上运营,无法做 ...

  8. GUI—ST_emWin移植

    GUI-ST_emWin移植 一.st_emwin移植 1.stemwin源文件下载:ST官网 https://my.st.com/content/my_st_com/en/search.html#q ...

  9. [转]OpenLiveWriter 代码插件

    插件地址链接:http://pan.baidu.com/s/1jHFDtbS 密码:ax31 将文件解压,放在路径下面 重启应用后,如图

  10. 微信小程序节点查询方法:wx.createSelectorQuery()的使用场景与注意事项

    小程序由于内置于微信,这使得它有了得天独厚的宣传和使用优势,本着学习的心态,我在官网上看了一遍开发文档,大致得出小程序框架的设计模式与使用注意事项(重点来了,其实开发文档某些方面叙述的并不仔细,甚至存 ...