VUEX

作者: 努力努力的老姑娘 | 来源:发表于2017-09-26 16:08 被阅读0次

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


数据状态管理模型

在学习并使用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: {
      ……
   }
})

相关文章

  • VUEX基本介绍,包含实战示例及代码(基于Vue2.X)

    VUEX 1 VUEX基本介绍 1.1 官方API 1.2 什么是vuex 1.3 Vuex使用场景 1、Vuex...

  • 【文档笔记】-Vuex

    什么是vuex? vuex文档: https://vuex.vuejs.org/zh/[https://vuex....

  • vuex配置

    vuex配置 目录 vuex的五个核心 配置vuex vuex持久化 一、vuex五个核心概念 State 定义状...

  • Vuex

    安装Vuex cnpm install vuex --save-dev Vuex是什么? 这是[Vuex的官网](...

  • Vuex

    1.Vuex概述 2.Vuex基本使用 3.使用Vuex完成todo案例 1.Vuex概述 Vuex是实现组件全局...

  • vuex

    Vuex介绍: Vuex官网:http://vuex.vuejs.org/ Vuex是实现数据状态管理的技...

  • vuex+axios 的开发流程记录

    相关文档 vuex: https://vuex.vuejs.org/zh/ 是否有必要使用vuex vuex是vu...

  • 2019-06-07

    import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)...

  • 配置 vuex 和 vuex 本地持久化

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

  • vuex

    配置 vuex 和 vuex 本地持久化 目录 vuex是什么 vuex 的五个核心概念State 定义状态(变量...

网友评论

      本文标题:VUEX

      本文链接:https://www.haomeiwen.com/subject/rnmsextx.html