Vuex 状态管理

状态管理

• state,驱动应用的数据源
• view,以声明方式将 state 映射到视图
• actions, 响应在 view 上的用户输入导致的状态变化

组件间通信方式

• 父组件传子组件
  子组件通过props接收数据
  父组件中给子组件通过相应属性传值

• 子组件传父组件
  通过自定义事件

• 不相关组件之间传值
  eventBus事件总线（还是自定义事件传递数据）

• 其它

  • $root
  • $parent
  • $children
  • $refs

ref两个作用

• 在普通HTML标签上使用ref,获取到的是DOM
• 在组件标签上使用 ref,获取到的是组件实例

Vuex

• 专门为Vue.js设计的状态管理库
• Vuex采用集中式的方式存储需要共享的状态
• Vuex的作用是进行状态管理，解决复杂组件通信，数据共享
• Vuex集成到了 devtools中，提供了历史回滚功能

使用场景

• 非必要情况不必使用Vuex
• 大型的单页应用程序
• 多个视图依赖同意状态
• 来自不同视图的行为需要变更同一状态
  state:单一状态树，存储所有数据 ...mapState()在计算属性中使用
  getters:相当于组件中的computed计算属性，对状态进行处理，缓存数据作用 ...mapGetters()在计算属性中使用
  mutations：状态的修改必须通过提交mutation 必须是同步执行的 这样才可以保证收集到所有的状态修改 ...mapMutations()在methods中使用
  actions:执行异步操作 ...mapActions()在methods中使用
  modules:单一状态树拆分为多个模块，每个模块有自己的state,getter,mutations,actions namespaced:true开启命名空间 ...mapState('命名空间',['state'])

vuex严格模式
直接修改state的值会抛出错误
在开发环境中开启，在生产环境关闭严格模式（严格模式会深度检查状态树，检查状态改变，影响性能）

new Vuex.Store({
  strict:process.env.NODE_ENV !== 'production'
})

Vuex 插件

• Vuex 的插件就是一个函数
• 这个函数接收一个 store 的参数

import Vue from 'vue'
import Vuex from 'vuex'

const myPlugin = store => {
 // store初始化后调用
  store.subscribe((mutation, state) => {
   //订阅 每次 mutation 之后调用 
   //mutation格式为{ type, payload } 可以通过type区分模块
  })
}


export default new Vuex.Store({
  plugins: [myPlugin] //注册插件
})

模拟一个Vuex

myVuex.js

let _Vue = null

class Store {
  constructor(options) {
    const {
      state = {},
      getters = {},
      mutations = {},
      actions = {}
    } = options

    this.state = _Vue.observable(state) //响应式处理
    this.getters = Object.create(null)
    Object.keys(getters).forEach(key => {
      Object.defineProperty(this.getters, key, {
        get: () => getters[key](state)
      })
    })

    this._mutations = mutations
    this._actions = actions
  }

  commit(type, payload) {
    this._mutations[type](this.state, payload)
  }

  dispatch(type, payload) {
    this._actions[type](this, payload)
  }

}

function install(Vue) {
  _vue = Vue
  _Vue.mixin({
    beforeCreate() {
      if (this.$options.store) {
        _Vue.prototype.$store = this.$options.store
      }
    }
  })

}
export default {
  Store,
  install
}