提示💡

数据,获取,修改。

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

Vuex 的构成有以下几个部分:

  • state : Vuex 的基本数据,用来存储变量
  • mutations : 提交更改数据,同步更新状态。
  • actions : 提交 mutations ,可异步操作。
  • getters :是 store 的计算属性
  • modules : 模块,每个模块里面有四个属性。

工作流程:

1.在组件中,用一个 this.$store.dispath 这个方法触发 actions 提交修改数据的操作。
2.Actions 用 commit 来触发 mutations 来修改数据。
3.mutations 接收到 commit 的请求,就会自动通过 Mutate 来修改 state 里面的数据,也只有 Mutations 可以操作 state 中的状态数据,状态一改变,组件中就重新渲染。
4.最后由 store 触发每一个调用它的组件更新。

可参考下图:

注:图源 Vuex 官网