vuex插件原理 vue.use原理

vuex 面试题

面试题

• vuex原理
• 介绍vuex
• vuex中action和mutation的不同
• vuex有哪些基本类型？
• vuex相比与其他通信方式的优势
• vuex的属性和方法
• vue中事件总线通信和vuex有什么区别，他们的使用场景分别是什么？

vuex概述

1.什么是vuex？
vuex是在vue中实现集中式数据管理的一个插件，对vue应用中多个组件的共享状态进行集中的管理，适合任意组件间通信

vuex的常用配置属性

• state:用于存储数据状态
• actions: 进行业务逻辑处理或者数据请求
• mutations:用于操作数据state，更改store中状态的唯一方法

vuex原理

核心原理

• Vuex本质是一个对象
• Vuex对象有两个属性，一个是install方法，一个是Store这个类
  • install方法的作用是将store这同一个实例挂载到所有的组件上**
  • Store这个类拥一些管理方法比如:commit，dispatch，Store类里将用户传入的state作为一个隐藏的vue组件的data,从而实现响应式。

简单的使用代码

import Vuex from 'vuex';
Vue.use(Vuex);

//该文件用于创建Vuex中最为核心的store
//actions 用于响应组件中的动作
const actions={};
//mutations 用于操作数据state
const mutations={};
//state: 用于存储数据
const state={};


//创建store
const store = new Vuex.store({
	actions,
	mutations,
	state
})
//导出store
export default store;

vuex原理解析

Class Store{
 //方法管理，数据管理，Store类里将用户传入的state作为一个隐藏的vue组件的data,**从而实现响应式**。
}
let install = function(){
 //将同一个store实例挂载在所有组件上，都可以通过$store访问
}

let Vuex = {
  Store,
  install
}
export default Vuex

install

let install = function(Vue){
    Vue.mixin({
        beforeCreate(){
            if (this.$options && this.$options.store){
                this.$store = this.$options.store; 
            }else { //如果是子组件
                this.$store = this.$parent && this.$parent.$store
            }
        }
    })
}

1.参数Vue，我们在第四小节分析Vue.use的时候，再执行install的时候，将Vue作为参数传进去。
2.mixin的作用是将mixin的内容混合到Vue的初始参数options中。相信使用vue的同学应该使用过mixin了。
3.为什么是beforeCreate而不是created呢？因为如果是在created操作的话，$options已经初始化好了。
4.如果判断当前组件是根组件的话，就将我们传入的store挂在到根组件实例上，属性名为$store。
5.如果判断当前组件是子组件的话，就将我们根组件的$store也复制给子组件。注意是引用的复制，因此每个组件都拥有了同一个$store挂载在它身上。

作者：阳光是sunny
链接：https://juejin.cn/post/6855474001838342151
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

vuex中action和mutation的区别

属性	作用描述	参数	同步/异步操作
action	action通过dispath触发action,提交的是 mutation	action第一个参数是context context是minstore,有一些常用方法比如commit、dispatch	同步/异步
mutation	mutation通过commit触发，mutation直接操作数据state	第一个参数是state	只能是同步操作 如果是异步函数可以正常使用，但是会导致开发工具不能跟踪

//准备actions——用于响应组件中的动作
const actions = {
	 jia(context,value){//context是minstore，包含了commit方法，第二个参数为dispath的传参
		console.log('actions中的jia被调用了')
		context.commit('JIA',value); //默认使用大写表示mutations中的函数被调用，第二个参数为传参
}

//准备mutations——用于操作数据（state）
const mutations = {
	JIA(state,value){//第一个参数:state数据 第二个参数:commit的传参
		console.log('mutations中的JIA被调用了')
		state.sum += value
	},
}
//准备state——用于存储数据
const state = {
	sum:0 //当前的和
}
//创建store
const store = new Vuex.store({
	actions,
	mutations,
	state
})

与其他通讯方式的对比

• eventBus适用于规模不大的情况下，实现全局的事件监听。 通信方式不受框架影响，适用范围更广。
  在全局事件总线中，通过在vm中beforeCreate生命周期中为 Vue 的原型上添加一个 $bus 属性，在所有组件都可以利用 $on和$emit在$bus属性上绑定方法，通过方法参数可以在不同组件传递数据。没有数据管理中心，如果需要传递数据，就需要绑定方法。
• vuex适用于规模比较大的情况，用来集中管理全局组件状态。
  有自己的数据管理中心，并且是响应式的。

Vue.use()的作用和原理

作用:通过Vue.use()使用插件
特点
1.需要在调用new Vue()启动之前完成
2.Vue.use会自动阻止多次注册相同插件

原理

Vue.use()方法至少传入一个参数，该参数类型必须是Object或Function。
如果是Object则这个Object需要定义一个install方法。
如果是Function这个函数就被当作install方法。
Vue.use()执行时相当于执行install方法，install执行时第一个参数就是Vue。

Vue.conponent()全局注册的原理

语法:Vue.conponent('组件名',组件值)
原理:Vue.component 通过把自定义组件挂载到 Vue.options.components 里面