野生大熊猫

Vuex学习简单笔记
Vuex 是什么?官方解释Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用...
扫描右侧二维码阅读全文
12
2020/12

Vuex学习简单笔记

Vuex 是什么?

官方解释

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

个人理解

Vuex其实就是为了帮助开发中大型应用的时候,解决组件与组件之间可以共用一套数据、方法。
比如一个大型项目中,不同组件都需要获取用户信息、用户权限等数据,就可以使用Vuex来进行统一的管理。

和Vue对比

  • state:存储状态(变量)
  • getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
  • mutations:修改状态,并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
  • actions:异步操作。在组件中使用是$store.dispath('')
  • modules:store的子模块,为了开发大型项目,方便状态管理而使用的。这里我们就不解释了,用起来和上面的一样。
名称VueVuex区别/备注
数据datastate存储数据
计算属性computedgetters计算属性
方法mothodsmutationsmutations不可能使用异步
方法mothodsactions可使用异步

总结

  • actions 的参数是 store 对象,而 getters 和 mutations 的参数是 state . actions 和
  • mutations 还可以传第二个参数,具体看vuex官方文档 getters/mutations/actions 都有对应的map,如:
  • mapGetters , 具体看vuex官方文档 模块内部如果怕有命名冲突的话,可以使用命名空间, 具体看vuex官方文档 vuex
  • 其实跟 vue 非常像,有data(state),methods(mutations,actions),computed(getters),还能模块化.
Last modification:December 12th, 2020 at 04:29 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment