Vuex相关

1. 标题

部分概念集合
Vuex 是为Vue提供的一种状态管理机制。
每一个vue插件都需要有一个公开的install方法。

2.特点

Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候,若store的状态发生变化,那么相应的组件也会相应地得到高效更新。
不能直接改变store中的状态,只能通过显式的提交mutation改变store中的状态。通过commit提交mutation(唯一)
vuex实现方式完全的使用了vue自身的响应式设计,依赖监听、依赖收集都属于vue对对象Property set get方法的代理劫持。

3.vuex 如何混入到vue中

在install的时候调用了applyMixin方法,在vue的beforeCreate前初始化vuex(vuexInit),初始化过程中将opotion.store赋值给this.$store,达到通过this.$store直接访问的目的。
部分?:
vue在引入vuex的时候使用了vue.use(Vuex)
Vue 源码在 initGlobalAPI 入口方法中调用了 initUse (Vue) 方法,这个方法定义了 Vue.use() 需要做的内容。

  • 初始化plugin

  • 判断是否有plugin、判断是否重复

  • 其中方法中判断了插件是否有 install 方法

    而vuex中有相应的install函数,这个方法需要做的是

  • 判断是否重复安装

  • 执行 applyMixin,目的是执行 vuexInit 方法初始化 Vuex。将 vuexInit 混淆进 Vue 的 beforeCreate(Vue2.0) 或 _init 方法(Vue1.0)

    applyMixin(Vue)

    Vue.mixin({ beforeCreate: vuexInit });
    

    所以每一个vue的vm实例都会调用vuexInit()方法

      function vuexInit () {
        const options = this.$options
        if (options.store) {
          /* 根节点存在 stroe 时 */
          this.$store = typeof options.store === 'function'
            ? options.store()
            : options.store
        } else if (options.parent && options.parent.$store) {
          /* 子组件直接从父组件中获取 $store,这样就保证了所有组件都公用了全局的同一份 store*/
          this.$store = options.parent.$store
        }
      }
    
    • 根节点存在 stroe 时,则直接将 options.store 赋值给 this.$store。否则则说明不是根节点,从父节点的 $store 中获取。
    • 通过这步的操作,我们就以在任意一个 vm 中通过 this.$store 来访问 Store 的实例。
4. 工作流程

vuex实现了一个单向数据流,在全局有一个state存放数据,如果要改变数据,必须通过commit提交mutation改变数据,mutation同时提供了订阅者模式供外部插件调用数据的更新。
所有的异步操作(如后端接口相关)或者批量的操作要用action,通过dispatch触发。
getter类似vue中的compute属性,对数据的过滤,getter的返回值会根据他的依赖被缓存起来,只有依赖值改变才会更新

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值