一、基本介绍
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中,实现全局数据状态单独管理的功能。
二、安装和配置
1.安装vuex
使用npm安装并保存到package.json中:
2.配置
配置方式和路由的配置方式差不多