VUEX

为什么需要状态管理?
 我们一个项目会有很多的数据、或者是组件拼成的;而不同的组件之间往往要共享一些状态。比如用户的登录状态、购物车的动态商品增删等;
 否则若此时某个组件的内容发生改变。我们常常要通过事件把这些更新通知传到其他的组件一个个的进行更新,当数据组件非常多的时候,这一个“通知”的行为就会变得非常复杂。


数据状态管理模型

在学习并使用vuex之前,有必要先把官网上的这个数据状态管理模式的流程图先理解清晰:
Store 是一个统一的数据中心,用来维护状态数据
component 每个组件进行更新的时候就会通知数据中心
③数据中心Store再把shareed state共享的状态去触发调用它的每一个组件的更新。

vuex的工作流程:状态管理Flux模型

Flux模型图的目的也是为了实现上面的状态管理模型图,使用vuex去操作最主要的是理解这个模型。
component通过Action操作Mutations
Mutations控制数据中心的状态State
④而State更改后,又反馈到了Components
Action:跟后台去调用API的操作只能在Action中执行
⑥是vuex操作的的部分

  1. 首先需要在创建的项目中安装vuex npm install vuex --save
  2. 引入:类似于引入vue一样 import Vuex from vuex
  3. 注册:使用Vue.use() 方法来注册 vuex Vue.use(Vuex)
  4. 实例化: 用store模式来实现状态管理
 let store = new Vuex.Store({
    state: {
        数据中心……
    }
   mutations: {
        ……
   },
   actions: {
      ……
   },
   getters: {
      ……
   }
})
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 系列文章:Vue 2.0 升(cai)级(keng)之旅Vuex — The core of Vue applic...
    6ed7563919d4阅读 10,010评论 2 58
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 7,991评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 8,301评论 0 6
  • 目录 组件化 组件通信 状态管理 Vuex 是什么 Vuex 有什么特点 Vuex 解决了什么问题 什么类型的数据...
    前端小华子阅读 6,038评论 0 16
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 10,106评论 7 61