深入Vue底层,手写一个vuex

简介: 笔记

1. Vuex是什么?什么场景下使用?


Vuex是vue的一个插件,叫做状态管理模式,全局共享某一些状态

通俗来讲,当各组件需要共享某一组状态的时候,会用到Vuex,兄弟组件及跨级组件传值也可以派上用场(如果数据量不大,或者组件状态不需要共享也可以用中央信息插件event-bus)


2. Vuex的基本使用


vue-cli 4.0 以上,在搭建脚手架的时候选择此项就可以

项目搭建完成,便会在src文件夹下看到一个store,这就是自动生成的仓库

以下是vuex的一些基本操作,供参考:

import Vue from 'vue'
import Vuex from 'vuex'  
Vue.use(Vuex)
export default new Vuex.Store({   
  state: {  
    name: 'Vuex',
    age: 18
  },
  // 可以看做vuex的计算属性
  getters: {
    addName(state) {
      return `${state.name}牛逼`
    }
  },
  // 提交数据更改
  mutations: {    
    syncAdd(state, payload){
      state.age += payload
    },
    syncReduce(state, payload){
      state.age -= payload
    }
  },
  // 处理异步,此处为异步提交数据
  actions: {  
    asyncReduce({commit}, payload) { 
      setTimeout( () => {
        commit('syncReduce', payload)
      }, 1000)
    }
  },
  // 管理多个模块,当vuex比较大的时候会用到
  modules: {
  }
})
  • vue组件中的调用
<template>
  <div id="app">
    <h2>{{$store.state.name}}</h2>
    <div>{{$store.getters.addName}}</div>
    <div>年龄: {{$store.state.age}}</div>
    <div><button @click="add()">加10</button></div>
    <div><button @click="reduce()">减10-异步</button></div>
  </div>
</template>
<script>
export default {
  mounted () {
    // 这里可以访问到 vuex中的整个store
    console.log(this.$store)
  },
  methods: {
    // 同步加10
    add(){
      this.$store.commit('syncAdd', 10)
    },
    // 异步减2
    reduce() {
      // 会去找对应的action
      this.$store.dispatch('asyncReduce', 2)
    }
  }
}
</script>


3. 手写一个vuex


  • 从以上的应用,便可以反推出Vuex的基本源码
let Vue;
class Store {
    constructor(options = {}) {
        // 实现响应式 核心(刚刚直接拿过用户的数组放上去,是没有响应式的)
        this.s = new Vue({
            data() {
                return { state: options.state }
            }
        })
        // 将用户传入的getters放到store实例之上
        let getters = options.getters
        this.getters = {} 
        // 通过循环,拿出键值,绑定访问器属性get 劫持对象的所有属性
        Object.keys(getters).forEach((getterName) => {
            Object.defineProperty(this.getters,
            getterName, {
                get: () => {
                    // 执行此函数
                    return getters[getterName](this.state) 
                }
            })
        })
        // 获取所有同步更新的操作方法
        let mutations = options.mutations 
        // 放到实例上去
        this.mutations = {}
        // 订阅,下面commit是发布
        Object.keys(mutations).forEach( (mutationName)=> {
            // 当前实例上,通过名找方法
            this.mutations[mutationName] = (payload) =>{
                // 内部的第一参数是状态
                mutations[mutationName](this.state, payload)
            }
        })
        let actions = options.actions
        this.actions = {}
        forEachFn(actions, (actionName, fn) => {
            this.actions[actionName] = (payload) => {
                // fn 是这个玩意 asyncReduce
                fn(this, payload)
            }
        })
    }
    // 提交更改,在当前store找到对应函数执行,通过名字找  发布
    commit = (mutationName, payload) => {
        this.mutations[mutationName](payload)
    }
    // action 分发的方法
    dispatch = (actionName, payload) => {
        this.actions[actionName](payload)
    }
    // 为了方便取值
    get state() {
        return this.s.state
    }
}
const install = (_Vue) => {
    Vue = _Vue 
    Vue.mixin({
        beforeCreate() {
            console.log('beforeCreate')
            if (this.$options && this.$options.store) {       // 根实例
                // 根实例增加$store属性
                this.$store = this.$options.store
            } else {
                this.$store = this.$parent && this.$parent.$store
            }
        }
    })
}
export default {
    install, 
    Store
}
  • 总体思路就是在Vue实例上挂上一个store实例,使用Vue提供的install方法注入,之后将用户传入的都绑定上去即可
目录
打赏
0
0
0
0
8
分享
相关文章
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
60 8
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
|
2月前
|
vue使用iconfont图标
vue使用iconfont图标
151 1
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等