官方提供的插件,状态管理库,集中式管理项目中组件共用的数据

vuex适合大型的项目,如果项目比较复杂就可以使用vuex

vuex 使用的意义:如果存在多个组件共享状态的情况,会出现多个视图依赖同一个状态,或者不同视图的动作更改同一个状态,这个在实现的时候都是比较繁琐的,所以可以将共享的状态用vuex管理,简化这个步骤

创建了vuex之后,在每个组件引入并使用这个组件,也可以简化操作在main.js中注册,在所有组件中都可以使用$store

state

存储数据的地方,因为vuex的数据存储是响应式的,所以最好使用computed属性获取这些数据,可以使$store.state.属性名获取需要的数据,或者是使用mapState辅助函数,这个函数可以一次性返回多个计算属性,简化操作

getter

在getter中可以定义共用的处理数据的方法,这就省去了在多个组件中重复定义或者引入的问题

mutation:修改state的手段

mutation是更改state内状态的唯一方式

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

mutation内部的回调函数接受state作为第一个参数
在调用mutation的回调函数的时候,不能直接调用,而要通过state.commit("increment")进行调用
在mutation内只能使用同步函数,不能使用异步函数

actions

通过action提交mutation更改state的属性

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。但是context并不是state。

使用$store.dispatch()方法来调用action的函数,触发mutation更改state,这是为了实现在mutation内部不能实现的异步操作

modules

modules主要是为了将store中的数据进一步进行分层,因为如果项目较大,所有数据都存放在store中会存在一定的使用上的不便,所以使用modules进行进一步的分层