vue-learning：40 - Vuex - 第一篇：概念和基本使用

vuex 第一篇

目录

• vuex概念
• state / mapState
• getter / mapGetter
• mutation / mapMutation
• action / mapAction
• module / 命名空间 / 动态注册和卸载模块
• vuex的插件plugin开发
• vuex的项目结构组织
• 严格模式 及 严格模式下的表单v-model的处理
• vuex的测试
• vuex的热重载

vuex 概念

在前面总结过组件间通信的几种方式，都有相应的适用的场景。在大型项目中，当组件树层级越来越多，组件间的通信也就越来越麻烦和复杂，特别当多个组件依赖于某些共同的数据，或者不同的组件需要能变更某一个数据时，还要保持状态的响应式的情形下，我们不得不考虑采取一种更好的方式去组织代码。

因此，我们考虑把组件所有共享的数据抽取出来，以一个全局单例的模式统一管理，我们要实现，在这种组织方式下，不管组件树的哪个节点，都能获取数据或者改变数据，并且依赖此数据的其它组件也能即时获取改变后最新的数据。把这些组件依赖的数据作为状态量进行统一管理，这就是状态管理。

在状态管理中，我们需要定义一些统一的概念和约定一些强制性的规则来方便管理，以此实现状态的改变可被追踪和可被预测。

这就是vuex产生的背后思想，它是专门为vue设计的状态管理库，充分复用了vue的数据响应机制来使得状态的改变也是响应式的。多个依赖于同一状态的组件，其中任何一个组件改变了某个依赖状态，其它组件也会也会相应地得到高效的更新。

在vuex中，我们定义了如下几个概念和约定规则：

• state： 存放整个应用共享的状态（数据源）；
• getter： 当多个组件对获取同一个state需要进行计算或转换成合适可用的状态时，对共同转换逻辑的抽离，类似计算属性
• mutation： 同步变更某个状态量的唯一方法；
• action： 组件中需要异步触发某一状态量改变，此时派发一个aciton，触发管理这个状态量的mutation来变更这个状态量。
• module： 当项目状态管理更为复杂时，可以根据项目结构定义多个模块，每个模块都有自己的state/getter/mutation/action。为了多个模块或模块与全局仓库的隔离，可以对模块进行命名，形成模块的命名空间，具有命名空间的模块依然可以获取全局状态，在逻辑中也可以动态注册模块。
• store： 以上这些状态和方法都定义在store中，类似一个仓库，存放数据源，以及获取和变更数据的方法。一个vue实例全局只能有一个store。store对象就相当一个vuex的实例对象。

vuex 使用

// 1. 引入vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 2. 在vue中注册vuex插件
Vue.use(Vuex)

// 3. 实例化一个管理状态的仓库store
const store = new Vuex.Store({
    state:{},
    getters: {},
    mutations: {},
    actions: {},
    modules: {}
})

// 4. 将store 全局注入到vue实例
const app = new Vue({
    el: "#app",
    // 把 store 对象提供给 “store” 选项，这样就可以把 store 的实例注入所有的子组件
    store,
    // 其它代码...
})

// 5. 组件中使用 this.$store
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

总结下约定的规则，简单的说就是：commit mutation，dispatch action