1.vuex的作用
官方话语:
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
简单的理解就是多个组件需要共享一些变量的状态时(如用户的登录状态,用户的登录信息,当前地理位置等等),可以将这些变量用vuex来进行统一的管理。
2.vuex的官网图解
- state:存放变量的地方,vue的组件可以获取到这些数据。
- Vue Components:vue组件,可以通过点击等一些行为进行数据的改变。
- actions: 它与backend API(后端API 或后台接口)相连接,表示进行异步操作
- mutations:用于改变state里面的数据,它与Devtools(vuex的一个调试工具),当组件需要更改数据时commit提交到mutations里面进行修改,注意actions一般是进行异步操作时用到,当没有异步操作时组件直接向mutations进行数据操作。
3.vuex的store
每一个Vuex 应用的核心就是 store(仓库)。store相当于一个容器,包含着你的应用中大部分的状态。vuex与传统的全局变量有两点区别:
- vuex的存储状态时响应式的。当里面的数据发生变化时,前台页面也发生变化。
- vuex能够通过devtools工具跟踪每一次数据的变化。因此不要直接对state进行修改,应该commit到mutations进行修改,这样能够进行数据状态改变追踪。