Vuex概念并实现一个简单的Vuex

Vuex

什么是Vuex

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

什么情况下使用Vuex

• 非必要的情况不要使用 Vuex
• 大型的单页应用程序
  • 多个视图依赖于同一状态
  • 来自不同视图的行为需要变更同一状态

Vuex 核心概念：

• Store：
  • 每一个应用仅有一个Store
  • Store是一个容器包含着应用的大部分状态
• State：
  • 单一状态树，也是唯一的
  • 状态是响应式的
• Getter：
  • 计算属性，对计算结果进行缓存
• Mutation：
  • 状态的变化必须通过提交mutation来完成
• Action：
  • 可以进行异步操作，内部改变状态的时候需要提交mutation
• Module：
  • 将Store分割成模块

实现一个简单的Vuex

1.作为一个插件首先要定义install方法

• 这里和之前实现简单的router不同
  • 在使用Vuex的使用是直接使用的Vue.use(Vuex)
  • 而实现的时候是使用的new Vuex.Store()
  • 所以需要默认导出一个对象,对象内包含Store,和install

// 缓存Vue的实例到全局中
let _Vue
function install(vue) {
    // 只在实例中挂载一次
    if(Store.installed) return
    Store.installed = true
    _Vue = vue
    // 把创建vue实例时候传入的store对象注入的vue实例上
    // 混入，这里混入所有的vue实例都会有
    _Vue.mixin({
        beforeCreate(){
            if(this.$options.store) {
            // 原型上挂在操作只需要执行一次，如果是组件不执行，如果是vue实例才执行
            _Vue.prototype.$store = this.$options.store
            }     
        }
    })
  })
}

2.定义Store类中的constructor

• 根据传入的参数来初始化Store
• 然后初始化Store内的属性
  • state是响应式的
  • 把getters内的方法通过Object.defineProperty转换成getters对象中的get访问器

class Store {
   
    constructor(options) {
   
        // 解构出来传递的选项， 默认值是空对像
        const {
   
            state = {
   },
            getters = {
   }