带你了解vuex以及在开发中怎么使用vuex

394 阅读2分钟

Hello,Everybody,we will talk about the Vuex and how to use it during development! 我是前端靓仔maybe,那么接下来,废话少说,咱们就好好聊聊非常好用的Vuex。

1.浅谈vuex概念
vuex是一个专门为vue.js应用程序开发的状态管理模式,跟react的redux一个道理,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以漪中可预测的方式发生变化,简单的来说,就是数据共享,对数据集中起来进行统一的管理。

这么说吧,假如你的项目足够简单,我还是推荐你最好不要用vuex,一个简单全局的事件总线 event bus就足够了,但是,如果你需要构建一个中大型spa应用,你就必须要考虑如何更好地在组件外部管理状态,vuex将是你最好的选择

核心概念主要有这些:

  • State
    vuex使用单一状态树,用一个对象就包含了全部的应用层级状态,将所需要的数据写在里面,类似于data。
    在组件中要获取state中的变量要这么写:this.$store.state.变量名

  • Getter
    有时候我们需要从store中的state中派生出一些状态,使用Getter,类似于computed。
    在组件中获取getters里面的值时要这么写: this.$store.getters.值名

  • Mutation
    更改 Vuex 的 store 中的状态的唯一方法,类似methods。
    在组件中使用Mutation里面的方法时要这么写:this.$store.commit('xxx') 提交 mutation

  • Action
    Action 提交的是 mutation,而不是直接变更状态,可以包含任意异步操作,这里主要是操作异步操作的,使用起来几乎和mutations方法一模一样,类似methods。
    在组件中使用Action里面的异步方法的时候要这么写:this.$store.dispatch('xxx')

  • Module
    当应用变得非常复杂时,store 对象就有可能变得相当臃肿。Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

在来一张图配套理解一下

图中提到的...mapState,...mapMutations,...mapActions就是实际开发项目中经常用到的,不过要在组件先从vuex import这三个东西进来才能使用他们,极大的简化了获取vuex里面的数据和方法的步骤,