vue 状态管理 一、状态管理概念和基本结构

系列导航

vue 状态管理 一、状态管理概念和基本结构

vue 状态管理 二、状态管理的基本使用

vue 状态管理 三、Mutations和Getters用法

vue 状态管理 四、Action用法

vue 状态管理 五、Module用法

一、状态管理是什么？

可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。

二、 状态管理图例

三Vuex核心的概念:

1、State

State单一状态树，就是把一些好多组件都需要的变量放到统一的位置定义，变量变更后所有调用它的地方数据都会变更。

2、Getters

类似于计算属性

3、Mutation

store状态的更新唯一方式：提交Mutation

4、Action

Action类似于Mutation, 但是是用来代替Mutation进行异步操作的。

5、Module

Module是模块的意思, 为什么在Vuex中我们要使用模块呢?

Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.当应用变得非常复杂时,store对象就有可能变得相当臃肿.为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等

后面的章节开始对每个概念进行演示。

四、基本结构

文件：src/store/index.js

import {createStore} from 'vuex'

export default createStore({

state: {},

mutations: {},

getters: {},

actions: {},

modules: {}

})