Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应

的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了

诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

流程图

作用

  • 状态管理(非父子通信)
  • 状态快照(数据缓存)
  • 方便管理和调试,时光旅行

state

state:单一状态树 ,每个应用将仅仅包含一个 store 实例。

*this.$store.state.状态名字

*…mapState([“title”])

getters

getters:可以从store 中的 state 中派生出一些状态,getters的返回值会根据

它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

*可以认为是 store 的计算属性

*this.$store.getters.计算属性名字

*…mapGetters([“getFilms”])

mutations

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

*常量的设计风格

[SOME_MUTATION] (state) {

// mutate state

}

*必须是同步函数

*this.$store.commit(“type”,”payload”);

actions

actions:

*Action 提交的是 mutation,而不是直接变更状态。

*Action 可以包含任意异步操作。

*this.$store.dispatch(“type”,”payload”)

注意:

  • 应用层级的状态应该集中到单个 store 对象中
  • 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
  • 异步逻辑都应该封装到 action 里面

 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×