vuex基础知识自我小结

Vuex

一、vuex理解

vue提供了另外一个类似 Redux 的解决方案 Vuex，一个集中式状态管理的库；也就是说，你可能不需要 Vuex，它只是对你应用状态进行管理的一个库。

二、属性

核心属性：

state，getter，mutation，action，module

state：

存储数据，存储状态；在根实例中注册了store 后，用 this.$store.state 来访问；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新

vuex管理的状态对象，应该是唯一的

getters：

可以认为是 store 的计算属性，相当于 vue中的 computed，依赖于 state里面的值。它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

包含多个计算属性(get)的对象

谁来读取: 组件中: $store.getters.xxx

mutations：

用于修改状态，store里面的数仅能通过mutations里面的方法改变,但是必须是同步的。更改 vuex 的 store 中的状态的唯一方法是提交 mutation，也就是$store.commit。

包含多个直接更新state 的方法(回调函数)的对象

谁来触发: action 中的commit(‘mutation 名称’)

只能包含同步的代码, 不能写异步代码

actions：

包含任意异步操作，用它处理完后再触发mutations来改变状态。

​ 包含多个事件回调函数的对象

​ 通过执行: commit()来触发mutation 的调用, 间接更新state

​ 谁来触发: 组件中: $store.dispatch(‘action 名称’, data1) // ‘zzz’

​ 可以包含异步代码(定时器, ajax)

modules：

将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。

包含多个module

一个module 是一个store 的配置对象

与一个组件(包含有共享数据)对应

main.js:

app.vue(未优化前)：

app2.vue（优化后）：

向外暴露的store对象：

组件中：

映射store：

store对象：

所有用vuex 管理的组件中都多了一个属性$store, 它就是一个store 对象

属性:

​ state: 注册的state 对象​ getters: 注册的getters 对象

方法:

​ dispatch(actionName, data): 分发调用action

三、vuex的数据传递流程

当组件进行数据修改的时候我们需要调用Dispatch来触发Actions里面的方法。

actions里面的每个方法中都会有一个commit方法，当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。

mutations里面的每个函数都会有一个state参数，这样就可以在mutations里面进行state的数据修改，当数据修改完毕后，会传导给页面。页面的数据也会发生改变。

四、vuex结构分析