前端入门之(vuex源码解析一)

水深无声 2022-05-19 07:42 199阅读 0赞

前言: 这两天听到最多的就是“假疫苗“事件了,唉唉~~ 真的是为了利益可以不管不顾一切啊,这可能也是当今社会的一个现象,悲哀!! 说是有台风啥的,在家一个人默默地待了两天,一个人的时候总喜欢胡思乱想,甚至会花上一整天的时间思考完整个人生,有时候真希望自己能够活得天真或者自私点,这样就不会有太多烦恼了.

bb了一会进入今天的主题哈,入坑前端也有一段时间了,从android的(data-binding、eventbus、rxjava)、rn的redux、然后vue的vuex,以前也就是用用,没太大感觉,每个框架都是大同小异,最终的目的也就是是全局状态的管理,redux跟android的data-binding啥的小伙伴有时间自己去研究哈,正好最近一直在接触vue,所以就从vuex开刀了~~

先附上vuex的官网地址和github地址:  
[https://vuex.vuejs.org/zh/installation.html][https_vuex.vuejs.org_zh_installation.html]  
[https://github.com/vuejs/vuex][https_github.com_vuejs_vuex]

**至于vuex是什么?然后vuex的基本用法?我就不说了哈,官网比我说的好~~ 哈哈哈**

我们用vue-cli创建一个简单的vue工程:

vue init webpack VuexDemo

然后安装vuex

yarn add vuex

最后修改工程的HelloWorld.vue,然后添加按钮+-:

<template>
      <div class="hello">
        <div class="opt-container">
          <div class="opt opt-increase" @click="increase">+</div>
          <span class="opt">{
        {
        count}}</span>
          <div class="opt opt-decrease" @click="decrease">-</div>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'HelloWorld',
        data() {
          return {
            count: 0
          }
        },
        methods: {
          increase() {
            this.count++;
          },
          decrease() {
            this.count--;
          }
        }
      }
    </script>
    
    
    <style scoped>
      .opt-container {
        font-size: 0px;
      }
    
      .opt {
        display: inline-block;
        text-align: center;
        height: 40px;
        width: 40px;
        border-radius: 20px;
        background-color: #efefef;
        line-height: 40px;
        user-select: none;
        font-size: 20px;
        margin: 0 10px;
      }
    </style>

最后运行工程:

![这里写图片描述][70]

哈哈~走到这一步,想必只要接触过vue的童鞋都没问题,好啦~~ 我们现在就把我们的count变量抽取到vuex里面去.小伙伴跟着我一起往下走哈~~

首先我们创建一个store文件夹,然后返回store对象:

/**
     * @author YASIN
     * @version [React-Native Ocj V01, 2018/7/22]
     * @date 17/2/23
     * @description index
     */
    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    let state = {
      count: 0
    };
    const actions = {
      increase({commit}) {
        commit('increase');
      },
      decrease({commit}) {
        commit('decrease');
      }
    };
    const mutations = {
      increase(state) {
        this.state.count++;
      },
      decrease(state) {
        this.state.count--;
      }
    };
    export default new Vuex.Store({
      state,
      actions,
      mutations
    });

然后修改我们的main.js文件,把store引入到vue组件中:

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,
      components: {App},
      template: '<App/>'
    })

最后我们在我们的组件中把count跟store中的count绑定,然后添加increase跟decrease方法:

<template>
      <div class="hello">
        <div class="opt-container">
          <div class="opt opt-increase" @click="increase">+</div>
          <span class="opt">{
        {
        count}}</span>
          <div class="opt opt-decrease" @click="decrease">-</div>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'HelloWorld',
        computed: {
          count() {
            return this.$store.state.count
          }
        },
        methods: {
          increase() {
            this.$store.dispatch('increase');
          },
          decrease() {
            this.$store.dispatch('decrease');
          }
        }
      }
    </script>
    
    
    <style scoped>
      .opt-container {
        font-size: 0px;
      }
    
      .opt {
        display: inline-block;
        text-align: center;
        height: 40px;
        width: 40px;
        border-radius: 20px;
        background-color: #efefef;
        line-height: 40px;
        user-select: none;
        font-size: 20px;
        margin: 0 10px;
        vertical-align: middle;
      }
    </style>

好啦!! 一个简单的vuexdemo就是是完成了,效果我就不演示了,跟我们一开始截屏是一样的,所以现在不管是在项目哪个地方,我们只需要执行

this.$store.dispatch('decrease');
    this.$store.dispatch('increase');

都能改变demo页面中的count值.

好啦~ 我们先看看我们的store文件:

Vue.use(Vuex);
    let state = {
      count: 0
    };
    const actions = {
      ...
    };
    const mutations = {
      ...
    };
    export default new Vuex.Store({
      state,
      actions,
      mutations
    });

可以看到我们在代码一开始执行了:

Vue.use(Vuex);

官网也说了:

// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)

我们都知道,当执行Vue.use(xx)方法后,Vue会执行xx的install方法,并会传递当前vue对象给第一个参数,所以:  
我们看看vuex源码中干了什么,我们找到vuex源码的install方法:

![这里写图片描述][70 1]

继续往下~

我们用的vue版本是Vue.version = ‘2.5.16’;所以继续往下

Vue.mixin({ beforeCreate: vuexInit });

所以当用的了Vue.use(vuex),当我们组件加载的时候,就会触发组件的beforeCreate生命周期方法,然后就会走vuexInit方法:

看到了这是不是有点明白了,就是为了让全局用一个store对象,然后通过组件的$store拿到当前store对象,所以Vue.use(vuex)还是很重要的.

好啦~~ 看完了Vue.use(vuex)后,我们找到vuex的Store对象,首先找到Store的构造方法:

代码不是很多,我们首先看到:

if (!Vue && typeof window !== 'undefined' && window.Vue) {
        install(window.Vue);
      }

也就是当我们没有使用Vue.use的时候,如果window对象中有Vue对象,也会执行跟Vue.use一样的操作:

![这里写图片描述][70 2]

我们先简单的说一下vuex的原理哈,主要看构造函数的这一行代码:

// initialize the store vm, which is responsible for the reactivity
      // (also registers _wrappedGetters as computed properties)
      resetStoreVM(this, state);

字面上可以看出,就是注册一个store的vm对象,那么vm对象到底是什么呢?我们继续往下:

先忽略其它代码,我们看到这么一段:

store._vm = new Vue({
        data: {
          $$state: state
        },
        computed: computed
      });

好吧,小伙伴是不是明白了,其实就是创建了Vue对象,然后把我们创建在store的state对象给了data的$$state属性,在vue中我们知道,data对象是响应式的,所以当我们发出一个action后,然后走到mutations,改变state的值,从而改变组件中绑定的值变换.

有点晚了,今天就先到这了,之后我会从vuex的dispatch—>mutations—>state的过程,带着源码一步一步走,最后再把actions的钩子函数等等把vuex的源码全部走一遍.

好啦~~ 大牛勿喷,下节见啦!!!!

[https_vuex.vuejs.org_zh_installation.html]: https://vuex.vuejs.org/zh/installation.html
[https_github.com_vuejs_vuex]: https://github.com/vuejs/vuex
[70]: /images/20220519/932abc9c770047458b0366f9c8ed1bff.png
[70 1]: /images/20220519/2ce3ca199f3c4e62ae183b84c910926a.png
[70 2]: /images/20220519/f82e180575fb4b63889d869b00693abb.png