Vue入门:Vuex 实例

如果你在使用 vue.js , 我想你可能会对 vue 组件之间的通信感到崩溃 。哪有没有解决办法呢?

Vuex:管理vue.js开发的状态管理模式,集中管理了组件的状态和数据。
什么情况下要使用vuex: 当你的页面数据很复杂,通讯很复杂的时候,vuex就是一个不错的选择。


单向数据流

state,驱动应用的数据源;
view,以声明方式将state映射到视图;
actions,响应在view上的用户输入导致的状态变化。

1、所有的状态都是通过state反应。
2、所有的组件数据驱动都是来自于一个对象。

运行原理

1、Vue组件通过dispatch来触发Vuex的actions。
2、Vuex的actions触发自己内部的mutations。
3、mutations触发内部的数据源state。
4、数据源(state)反过来渲染Vue组件。

开始使用
  • 安装依赖
npm install --save vuex
Vuex 核心概念
项目源码

仓库地址:demo


更多精彩请关注:Vue专题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,040评论 4 111
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,964评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,153评论 0 6
  • 系列文章:Vue 2.0 升(cai)级(keng)之旅Vuex — The core of Vue applic...
    6ed7563919d4阅读 4,588评论 2 58
  • Vue也已经升级到2.0版本了,到现在为止(2016/11/19)比较流行的MVVM框架有AngularJS(也有...
    彬_仔阅读 27,269评论 12 114