Vue实战之VueX 状态管理

Vue 实战

十四、VueX 状态管理

1、简介&安装

（1）简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

（2）在Vue Cli 项目中安装 vuex

npm install vuex --save

（3）配置 vuex

1. 在脚手架项目的src目录中创建 store目录，在store目录中创建 index.js

• 代码如下

2. 在main.js中引入store并注册状态管理器到 Vue 实例中

（4）使用状态管理器

2、state 属性

• 作用：用来全局定义一些共享的数据状态

• 语法：

const store = new Vuex.Store({
   
	state:{
   
		counter:0,//定义共享状态
	},
}

• 使用：

{
   {
   $store.state.counter}}