Vuex简单介绍

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

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

Vuex有五个主要概念

一、State

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

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

 

二、Getter

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

 

三、Mutation

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

state中:

mutation中：

 

在组件中改变socketId时：

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

 

四、Action

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

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

store中action下：

接下来由mutation去改变状态

 

五、Module

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

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

 

 

 

参考资料：

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

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