Vuex Vuex是什么？

1.Vuex

1.1 Vuex是什么？

Vuex是一个专为Vue应用程序开发的状态管理模式。它采用集中式存储来管理应用中的所有组件的状态，简单来说，对Vue应用中多个组件共享的状态进行集中式的管理。

状态（state）就是组件中共享的数据。

应用状态的案例：

• 登录信息
• 社交应用的中的通知
• 电商应用中的购物车

每一个Vuex应用的核心就是store，store就是一个容器，包含了应用中的所需要的状态。

创建store实例之所以能够在各个组件中共享的原因是：

store实例是一个全局单例模式，其提供了一种机制：将状态从根组件注入到每一个子组件中。所以在子组件中可以通过this.$store访问

1.2 安装

npm install --save vuex

状态管理建议存储在src/store目录

Vuex本质就是Vue的插件

1.3 核心概念

• state

state定义了应用的数据，其数据类型可以为string、number、boolean、array、object

• Getters

getters的作用是用于获取state中的数据信息，也就代表getters依赖于state

Vuex允许在store中定义getters（可以认为是store的计算属性），getters的返回值会根据它的依赖被缓存起来，只有当它的依赖值发生变化时才会被重新计算。其语法结构是：

getters:{
	getNums(state){
		...
	}
}

getters中将state作为唯一参数进行传递，state代表就是当前store的数据，其会自动注入。

• Mutations

Mutations是改变状态的的操作方法，也是Vuex修改state唯一的方法，其语法结构是：

mutations:{
	函数名称(state[,payload]){
        ...
    }
}

state作为mutations的第一个参数，而且Vuex中的state会自动注入

payload译为提交载荷，也就是向store.commit传入的额外参数，在多数情况下，载荷应该是一个对象。

调用mutations时需要执行commit()方法，其语法结构是：

store.commit("函数名称"[,参数)

• Actions

Actions类似于Mutations，不同于：

• Actions可以包含任意异步操作，但Mutations不允许发生异步操作
• Actions提交给Mutations，而不是直接修改state

语法结构是：

actions:{
	函数名称(context){
		....
	}
}

dispatch()方法用于分发Action,其语法结构是：

$store.dispatch('函数名称'[,payload])

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Do39bAYp-1587727233531)(E:\www\Material\WEBTN1912\14_VUEUI\Day06\note\assets\image-20200417175538264.png)]

2.再谈VUEX – 辅助函数

• mapState

mapState()函数用于为组件创建计算属性以返回Vuex Store中的状态，其语法结构是：

import {mapState} from 'vuex'

computed:{
	...mapState(array | object)
}

• mapGetters()

mapGetters()函数用于为组件创建计算属性以返回getters的返回值，其语法结构是：

import {mapState} from 'vuex'

computed:{
	...mapGetters(array|object)
}

• mapMutations()

mapMutations()函数用于创建组件方法以提交Mutation，其语法结构是：

import {mapMutations} from 'vuex';

methods:{
    ...mapMutations(array | object)
}

• mapActions()

mapActions()函数用于创建组件方法以分发Action，其语法结构是：

import {mapActions} from 'vuex';

methods:{
    ...mapActions(array | object)
}