Vuex--状态管理

什么是Vuex

Vuex是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到Vuex中去，而不必通过父子组件之间传值可，如果组件的数据不需要共享，此时这些不需要共享的私有数据没有必要放到vuex中，只有共享的数据，才有必要放在vuex中，组件内部私有的数据只需要放在组件的data中即可，由上述我们可以得知：Vuex是一个全局共享的数据存储区域，就相当于是一个数据仓库

props,data vuex的区别

安装方式

• 可以通过script标签直接引入
• 使用npm install Vuex -S 进行安装

使用方式

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

之后通过 new Vuex.Store(),得到一个数据存储对象

示例如下：

let store =  new Vuex.Store({
	state: {
	},
	mutations: {
	},
	getters: {
	},
	action:{
	},
	module:{
	}
})

下面分别叙述一下实例里面的这几个核心概念

概念详解

state

state就像是组件中的data函数，专门用来存储数据用的，所有的共享数据的定义都在这里，如果在组件中想要访问store中的数据，只能通过this.$store.state.** 来访问。

mutations

如果要操作store中的state值，只能通过调用mutations提供的方法，才能操作对应的数据，不推荐直接操作state中的数据，因为万一多方操作导致了数据的紊乱，不能快速定位到错误的源头。
如果组件想要调用mutations中的方法，只能使用this.$stroe.commit('方法名')来操作。
还有一点值得大家注意的是：mutations的函数参数列表中，最多支持两个参数，参数1:是state的状态，参数2:通过commit提交过来的参数。

getters

getters中的方法主要是为了给其他组件提供另外一个获取state中值的方式，需求场景就是：如果store中的state上的数据在对外提供的时候需要做一层封装，那么就是getters发挥的时候了，如果需要使用getters,则用this.$store.getters.**去调用