vuex全局状态管理,单向数据流

一、基本介绍

vuex是一个专为vue.js的SPA但也组件化应用程序开发的状态管理模式插件。

由于vue SPA的应用的模块化,每个组件都有它各自的数据(state)、界面(view)、和方法(actions)。这些数据、界面和方法分布在各个组件中,当项目内用变得越来越多时,每个组件中的状态会变得很难管理。这时vuex就派上用场了

1.单个组件中的状态

假如值时在单个逐渐中要改变界面view很简单,之需要改变state数据源即可。如下代码:


单个组件

所以,单个组件中的原理图是这样的:


单个组件的原理图

2.多个组件中的状态

然而,我们作为组件化SPA应用,必定会牵扯到多个组件间的通信。

比如有两个相同的组件A和B,他们共享一个数据count,并且都有一个方法可以操作这个count,我们使用vuex来写。

A组件和B组件的代码(代码相同)

多个组件

可以看到这里的两个increment按钮点击都会同时改变两个count的数据,因为数据源count和方法increment都是全局的。

正如下图官方原理图所画的,我们把全局数据源state、改变数据源的方法mutations、异步操作方法actions都放提取出来放到store中,实现全局数据状态单独管理的功能。


vuex官方原理图

二、安装和配置

1.安装vuex

使用npm安装并保存到package.json中:


安装


package.json

2.配置

配置方式和路由的配置方式差不多


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

推荐阅读更多精彩内容

  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,139评论 0 6
  • Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有...
    skycolor阅读 865评论 0 1
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,963评论 0 7
  • 一、什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有...
    紫月凌枫阅读 10,173评论 0 16
  • 上次学习了vue-router的使用,让我能够在各个页面间切换,将页面搭建了起来。这次则要学习vue的状态管理模式...
    VioletJack阅读 29,110评论 3 46