2021-0316-Vuex学习（一）

Vuex是什么？

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

什么是“状态管理模式”

new Vue({
	// state
	data () {
		return {
			count: 0;
		}
	},
	// view
	template: '
		<div>{{count}}</div>
	',
	// actions
	methods: {
		increment () {
			this.count++;
		}
	}
})

这个状态自管理应用包含以下部分：

• state：驱动应用的数据源；
• view：以声明方式将state映射到视图；
• actions：响应在view上的用户输入导致的状态变化。

什么时候使用Vuex

当我们的应用遇到多个组件共享状态时：

• 多个视图依赖于同一状态
• 来自不同视图的行为需要变更同一状态

因此我们要将组件的共享状态抽取出来，以一个全局单例模式管理。

安装

使用NPM进行安装

npm install vuex --save

在一个模块化的打包系统中，您必须显示地通过Vue.use()来安装Vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

开始

每一个Vuex应用的核心就是store（仓库）。store基本上就是一个容器，它包含着你的应用中的大部分的状态（state）。Vuex和单纯的全局对象有以下两点不同：

1. Vuex的状态存储是响应式的。当Vuex组件从store中读取状态时，若store中的状态发生改变，那么相应的组件也会得到高效更新。
2. 你不能直接改变store中的状态。改变store中的状态的唯一途径就是显示地提交（commit）mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。