几分钟带你认识vuex的五个核心属性

目录

一、Vuex是什么？

二、什么数据可以储存在vuex中呢？

三、对于使用Vuex的理解是什么？

四、vuex由五部分组成(五种状态/五种属性)

五:安装配置

 六、详解五种状态

1.state:存放公共数据 

2.getters:计算属性，对state里的变量进行过滤。

3.mutations:唯一可以改变state数据的工具，相当于vue里的methods

4.actions:异步操作

5.modules:模块化

---

一、Vuex是什么？

介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。

二、什么数据可以储存在vuex中呢？

a.如果一个数据，需要在多个组件中重复使用，可以把数据存放在vue的store中

b.用户数据，购物车数据

三、对于使用Vuex的理解是什么？

       由于Vue是单向数据流，子组件内部不能直接修改从父级传递过来的数据，子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话，可以借助子组件 A 向父组件传值，父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。

       但是这样会有一个问题，就是如果子组件 A 的父组件上面还有一层爷爷组件，或者还有更多祖父类型的层级，那么是不是会很麻烦。

       因此，我们会想到能不能我们将一个共有的数据存在一个特定的地方，用的时候自己去拿，这样就不需要一层层传值，于是乎 Vuex 就应运而生了。

四、vuex由五部分组成(五种状态/五种属性)

 VueX五个核心属性分别是state、getter，mutations、actions、module

state: 定义vuex的数据地方

actions:定义异步延迟的方法

mutations: 唯一可以修改state数据的方法

getters:从现有state数据计算出新的数据， 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）

modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

五:安装配置

第一步：npm i vuex --save/-S
第二步： 创建store.js 
第三步：挂载使用        Vue.use(vuex)
第四步：const store = new Vuex.Store({...配置项})
第五步：导出 export default store
第六步：导入main.js 在根实例配置 store 选项指向 store 实例对象

具体如下:

安装