一、什么是Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
二、什么是“状态管理模式”
状态自管理应用包含以下几个部分:
- state,驱动应用的数据源;
- view,以声明方式将 state 映射到视图;
- actions,响应在 view 上的用户输入导致的状态变化。
以下是一个表示“单向数据流”理念的简单示意:
![单向数据流](https://img-blog.csdnimg.cn/7bb1b826a4c24f8ebabfdf5f5b982900.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbXVtdXdlaV9s,size_20,color_FFFFFF,t_70,g_se,x_16)
但是,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
Vuex理念的示意图:
![Vuex数据流](https://img-blog.csdnimg.cn/e93595bb33764f568afa64e38bcb517f.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbXVtdXdlaV9s,size_20,color_FFFFFF,t_70,g_se,x_16)
三、安装
npm 安装
npm install vuex --save
在一个模块化的打包系统中,您必须显式地通过 Vue.use()
来安装 Vuex
:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
当使用全局 script
标签引用 Vuex
时,不需要以上安装过程。