Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化

    Vuex主要有两个作用:(1)全局数据存储和状态管理,Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。通过vuex可以实现全局状态的实时更新,例如在父组件home.vue中显示username,当我们在子组件中改变了username,通过vuex我们就可以实现实时更新而不需要手动刷新。(2)组件之间的通信,利用vuex可以方便地实现父组件与子组件、子组件之间的通信。

Vuex有五个主要概念

一、State

单一状态树。简单来说就是一份状态数据。基本结构:

Vuex简单介绍

在组件中获取状态数据的方式是

Vuex简单介绍

 

二、Getter

可以认为是store的计算属性,就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

 

三、Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

state中:

Vuex简单介绍

mutation中:

Vuex简单介绍

 

在组件中改变socketId时:

Vuex简单介绍

mutation都是同步事务,必须是同步函数

 

四、Action

上面说到mutation只能处理同步函数(其实可以处理异步,但是不建议使用,会造成混乱),action就是用来处理异步操作的。一些异步操作可以写在action中,如向后台请求。Action提交的是mutation,再由mutation改变状态。一个action钟可以执行多个mutation.

在组件中通过stored.dispatch分发action

Vuex简单介绍

store中action下:

Vuex简单介绍

接下来由mutation去改变状态

 

五、Module

模块化是为了优化处理复杂的应用。为了避免一个store对象过于臃肿,可以将store分割成模块。每个模块拥有自己的 state、mutation、action、getter。

我们在充电桩微信的两个工程中(用户版本和安装版本)都使用了module。将微信授权和接口调用相关的状态及方法单独放在wechat.js中,并在根store(store.js)引入

Vuex简单介绍

 

Vuex简单介绍

 

 

参考资料:

https://vuex.vuejs.org/zh/

https://www.jianshu.com/p/a0c11ae01991

 

 

 

相关文章: