Vuex

阅读目录

1. Vuex是什么？
2. Vuex的实现原理
   • vuex的store是如何挂载注入到组件中呢？
   • vuex的state和getters是如何映射到各个组件实例中响应式更新状态呢？

 

---

回到顶部

Vuex是什么？

 

 

 

　　Vuex是一个为Vue.js应用程序开发的状态管理工具，在开发大型单页面应用时，复杂的组件关系会使得各个组件之间通信困难，类似多个视图依赖于同一状态，或者来自不同视图的行为需要变更同一状态这些情况。Vuex将全局组件的共享状态抽取为一个store文件，它包含以下几个核心概念来实现状态的同一管理：

State

　　用来存储需要管理的状态；

Getter

　　相当于store的计算属性，可以对state的状态进行加工；

Mutation

　　提交mutation是更改state的唯一方法，一般由Action提交。它要求必须是同步函数，是为了让dectool工具能够追踪状态的变化。

Action

　　用来提交mutation，而不是直接变更状态。它可以调用commit()方法来提交一个mutation，在外部通过store.dispatch()方法来触发一个action。

　　相比于Mutation，Action是可以包含异步操作的。

Module

　　是store分割的模块，每个模块拥有自己的state、mutation、action和getter。

 

回到顶部

Vuex的实现原理

 

vuex的store是如何挂载注入到组件中呢？

 

　　Vuex是利用Vue的插件机制，在Vue.use(Vuex)时调用install方法，通过Vue的混入(mixin)机制，在beforeCreate()生命周期钩子中调用vuex的初始化方法，实现将store注入到组件实例中，而组件实例可以通过$store访问。

vuex的state和getters是如何映射到各个组件实例中响应式更新状态呢？

　　Vuex的state状态是响应式，是借助vue的data是响应式，将state存入vue实例组件的data中；Vuex的getters则是借助vue的计算属性computed实现数据实时监听。