vuex---vuex实现原理

时间：2020-05-08 20:53:11 阅读：63 评论：0 收藏：0 [点我收藏+]

vuex的设计思想：单向数据流的设计思想（数据可控，错误好追踪）

在组件中不能修改state中的数据，只能通过commit mutation来修改数据，或者dispatch action，在action中再commit mutation来修改数据

技术分享图片

vuex任务分析：

***.vue----------------------------------------------

<div>{{$store.state.count}}</div>

this.$store.dispatch("asyncIncrement", request2)

main.js中-------------------------------------------

import store from ‘./store‘

new Vue({
　　store,（在此挂载一下的目的就是供上面.vue组件中可以通过$store直接去访问）$store也是通过prototype的方式进行挂载的
　　render: h => h(App)
}).$mount(‘#app‘)

store.js------------------------------------------------（vuex装进来）

import Vue from "vue"

import Vuex from "vuex"

Vue.use(Vuex);//use方法调用了install方法

export default new Vuex.Store({//创建store实例

state:{count:0}, //存数据的

mutations:{ //改数据的

increment(state){

state.count += 1

}

getters:{ //类似计算属性，对state进行加工

left(state){

return 1-state.count

}

actions:{ //异步方法可写入，通过commit修改mutation

asyncIncrement({getters,commit}){ //参数能拿到getters，commit等，是因为vuex里封装的方法将Store的实例当参数传出

return new Promise((resolve,reject) => {

setTimeout(() => {

commit("increment");

resolve();

return;

},1000);

})

}

})

任务分析----------------------------------

·实现插件：$store（store的实例）挂载

·实现Store类：解析vuex的配置，持有$state，实现dispatch，commit，getters核心概念：

·借助vue实现数据的响应式

vuex.js---------------------------------------实现代码

let Vue;

class Store { //（通过store.js的vuex实例(Vuex.Store)可知，要创建一个Store类，实例中传了一个参数包含state,mutation,action等，所以Store类重要对其进行解析）

//持有state，并使其响应化

//实现commit和dispatch两个方法

constructor(options){

//解析实例中传入的数据

this.state = new Vue({data:options.state}); //因为state要实现数据响应式， //this.state是Vue实例，访问this.state.count就为响应式的count

this.mutations = options.mutations;

this.actions = options.actions;

//bind this----- commit和dispatch方法中在调用时 this的指向会出现问题（出现函数中调用函数的情况下，this指向会出现问题）

this.commit = this.commit.bind(this);

this.dispatch = thid.dispatch.bind(this);//箭头函数

}

//实现commit：可修改state中的数据

commit(type,arg){

this.mutations[type](this.state,arg)；//从mutations里拿到名字为type的方法，调用他，把state数据以及参数传给他

}

dispatch(type,arg){

return this.actions[type](this,arg)； //从actions里拿到名字为type的方法，传入的参数为this为当前实例，所以actions中的方法可以（{commit，state}）

}

//声明插件的install方法(Vue.use()用到install方法，规定)

function install(_Vue){//-----vue的插件必须实现install方法--规定

Vue = _Vue; //_Vue是形参：Vue的构造函数,use会把它传进来的

Vue.mixin({ //混入

beforeCreate(){

//this指的是组件实例

if(this.$options.store){ //vue实例传进去的store，即new Vue({store}）
　　

Vue.prototype.$store = this.$options.store;//use先执行，实例后创建，所以必须写入到mixin 不然此实例不存在

}

})

}

//导出vuex

export default {Store,install}

vuex里有个类叫store（绿框），能改数据的只有mutation；

vuex里要实现数据的响应式（因为组件中用到的数据，如果数据发生变化，界面要变更，所以数据必须是响应式的）--- 实现：vuex的构造函数初始化时做了响应式，所以与vue紧耦合，只能用在vue中；

vuex---vuex实现原理

原文：https://www.cnblogs.com/znLam/p/12852791.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)