vuex五大核心，及理解

vuex五大核心，及理解

vuex是专门为vue.js开发的状态管理工具，它可以储存所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex中有五大状态：

vuex的核心以使用：

1.state：存放状态

存放公共数据，是一个仓库，任何组件都可以调用里面的数据。

使用：在state中直接声明数据即可。

2. getters：vuex中的计算属性

相当于组件中的计算属性，当state中的数据发生改变，getters中的数据也回跟着改变

使用：在vuex中跟state同级，用发跟vux中像似。

3.mutations

是调用state中数据的 ，可以对state中的数据进行添加和修改。

使用方法是在this.$store.commit()

4.Actions 异步

在仓库store中定义需求调用mutations方法，在对应组件中定义触发更改状态的模板和方法

注意：mutations必须是同步函数，actions可以为异步函数。

5.modules 模板

​ 在仓库中定义不同的模板以及modules方法，

​ 在对应的组件获取并显示在页面上

​ 一般在做大型项目的时候，用来管理的

配置保存

vue中操作 vuex中有两个简便方式

import { mapState, mapMutations } from “vuex”;

mapState在computed中利用扩展符使用 …mapState({ user: “user” }),

可用数组方式和对象方式

数组方式：

…mapState（[]）用来接收vuex中的数据。使用逗号隔开

对象方式：

…mapState（{}）使用的是 …mapState({ user: “user” }),

在mapMutations是操作 vuex 中的methods

…mapMutations（add:{方法}）可以调用方法