Learn more about the implementation principles of vuex

When asked in an interview about the implementation principle of vuex, how do you answer? The following article will give you an in-depth understanding of the implementation principle of vuex. I hope it will be helpful to you!

I won’t go into details about vuex. Let’s briefly review: When the application encounters multiple components sharing state, simply The One-way data flow is easily broken: first, multiple views rely on the same state; second, actions from different views require changes to the same state. If the former is solved by passing parameters, it is not suitable for multi-layer nested components and sibling components; if the latter is solved by using direct references from parent-child components or multiple copies of event changes and synchronization states, it is not conducive to code maintenance.

So, the best way is to extract the shared state of the component and manage it in a global singleton mode! This is the basic idea behind vuex.

[Related recommendations: vuejs video tutorial, web front-end development]

So, the general idea of ​​vuex The framework is as follows:

class Store {
    constructor() {
        // state
        // getters  
        // mutations
        // actions
    }
    // commit
    // dipatch
}

Next, just write and read.

1. Create vue project

vue create vue2-vuex//创建vue2项目

yarn add vuex@next --save//安装vuex

yarn serve//启动项目

2. Implementation principle

1. State

(1) Use

//store.js
// 仓库
import Vue from 'vue'
import Vuex from 'vuex'
import extra from './extra.js'

Vue.use(Vuex) //引入vuex的方式，说明Store需要install方法
export default new Vuex.Store({
    // 仓库数据源
    state: {
        count: 1,
        dowhat: 'addCount'
    },
}

//app.vue
<template>
    <div class="testState">
        <p>{{mycount}}</p>
        <p>{{dowhat}}:{{count}}</p>
    </div>
</template>

<script>
export default {
    import {
        mapState
    } from &#39;vuex&#39;
    // 推荐方式
    computed: mapState()({
        mycount: state => state.count
    }),
    // 推荐方式的简写方式
    computed: {
        // 解构的是getters
        ...mapState([&#39;count&#39;, &#39;dowhat&#39;])
    },
  }
</script>

(2) Note

Since Vuex’s state storage is responsive, from the store The simplest way to read state in an instance is to return a certain state in a computed property . This pattern causes the component to rely on the global state singleton . In a modular build system, each component that needs to use state needs to be imported frequently, and the state needs to be simulated when testing the component.

Vuex provides a A mechanism to "inject" state from the root component into each sub-component (need to call Vue.use(Vuex))

(3) Implementation

So in addition to the five internal attributes of

Store

, we also need to consider a install method of the plug-in, so the general framework is as follows: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>class Store { constructor() { // state // getters // mutations // actions //modules } // commit // dipatch } let Vuex = { Store, Install } export default Vuex</pre><div class="contentsignin">Copy after login</div></div>So, next It can be implemented concretely,

class Store {
    constructor(options) {
        // state
        this.state = options.state
    }
}
let install = function(_Vue) {
    _Vue.mixin({
        beforeCreate() { //在组件创建之前自动调用，每个组件都有这个钩子
            if (this.$options && this.$options.store) { //this.$options读取根组件
                this.$store = this.$options.store
            } else {
                this.$store = this.$parent && this.$parent.$store
            }
        }
    })
}

However, the above state implementation has a shortcoming: when the data is changed, the data of

state

cannot be dynamically rendered. So how to make the data in state responsive becomes a key issue? In fact, similar to data in vue, you can also make it responsive in this way. Then you have to pass in Vue from the install method, so after the change: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>let Vue=null class Store { constructor(options) { // state this.vm = new _Vue({ data: { state: options.state//data中的数据才是响应式 } }) } get state() { return this.vm.state } } let install = function(_Vue) {//用于Vue.use(plugin) Vue=_Vue _Vue.mixin({ onBeforeCreate() { //在组件创建之前自动调用，每个组件都有这个钩子 if (this.$options &amp;&amp; this.$options.store) { //this.$options读取根组件 this.$store = this.$options.store } else { this.$store = this.$parent &amp;&amp; this.$parent.$store } } }) }</pre><div class="contentsignin">Copy after login</div></div>

2, getters

(1) Use

//store.js
export default new Vuex.Store({
    // 计算属性
    getters: {
        // 这里的函数不需要调用，可以直接使用，官方默认前面有get
        getCount(state) {//接受 state 作为其第一个参数
            return state.count * 100;
        }
    },
}

(2) Note that

Sometimes we need to derive it from the state in the store For some states (such as adding, deleting, filtering, etc.), Vuex allows us to define "getters" in the store (which can be thought of as computed properties of the store). Just like a computed property, the return value of a getter will be cached according to its dependencies, and will only be recalculated when its dependency values ​​change. Getters accept state as their first parameter, and getters are accessed through methods. , the call will be made every time without caching the result

(3) Implementation

 // getters
    let getters = options.getters || {}
    this.getters = {}
    Object.keys(getters).forEach(getterName => {
      Object.defineProperty(this.getters, getterName, {
        get: () => {
          return getters[getterName](this.state)
        }
      })
    })

3, mutations

(1) Use

//store.js
export default new Vuex.Store({
        // 相当于methods
    mutations: {
        // mutations内部的函数，天生具备一个形参
        add(state, n) {
            state.count += n;
        },
        decrease(state, n) {
            state.count -= n;
        }
    },
}

methods: {
            submit() {
                console.log('success');
            },

            // 解构仓库mutations里面的方法，要啥解构啥
            ...mapMutations(['add', 'decrease']),
            // this.$store.commit('add'),
                
            ...mapActions(['addAction', 'decreaseAction']),
            // this.addAction()调用actions里面的方法
            // this.$store.dispatch('add'),
}

(2) Note that

is the only way to change the state in the Vuex store The method is to submit the mutation. Mutation in Vuex is similar to events: each mutation has a string

event type (type)

and a callback function (handler). This callback function is where state changes are made, and it accepts state as the first parameter and cannot directly call a mutation handler. This option is more like an event registration: "When a mutation of type increment is triggered, call this function." To wake up a mutation handler, you need to call store.commit# with the corresponding type. ## Method can pass in additional parameters to store.commit

, which is the

payload of mutation . In most cases, the payload should be a Object, which can contain multiple fields and the recorded mutations will be more readable(3) Implementation

   // mutations
    let mutations = options.mutations || {}
    this.mutations = {}
    Object.keys(mutations).forEach(mutationName => {
      this.mutations[mutationName] = (arg) => {//保证多个（第二个）参数的传入
        mutations[mutationName](this.state, arg)
      }
    })
    
    commit = (method, arg) => {//使用箭头函数改变被调用的this的指向
        // console.log(this);
        this.mutations[method](arg)
  }

4, actions

(1) Use

//store.js
export default new Vuex.Store({
    actions: {
        addAction(context) {
            // 在这里调用add方法
            context.commit('add', 10);
        },
        decreaseAction({
            commit
        }) {
            commit('decreaseAction', 5)
        }
    },
}

(2) Note

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作
• Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
• Action 通过 store.dispatch 方法触发
• Action 通常是异步的，store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise
• 一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行

（3）实现

    // actions
    let actions = options.actions || {}
    this.actions = {}
    Object.keys(actions).forEach(actionName => {
      this.actions[actionName] = (arg) => {
        actions[actionName](this, arg)
      }
    })
    
   dispatch=(method, arg) =>{
    this.actions[method](arg)
  }

5、modules

（1）使用

    // actions
    let actions = options.actions || {}
    this.actions = {}
    Object.keys(actions).forEach(actionName => {
      this.actions[actionName] = (arg) => {
        actions[actionName](this, arg)
      }
    })
    
   dispatch=(method, arg) =>{
    this.actions[method](arg)
  }

    //store.js
    modules: {
        extra: extra
    }

（2）注意

• 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿，Vuex 允许我们将 store 分割成模块（module） 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割
• 对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象
• 对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState

• 对于模块内部的 getter，根节点状态(rootState)会作为第三个参数暴露出来

三、整体代码

let Vue = null//全局的_Vue

class Store {
  constructor (options) {
    // state
    //this.state = options.state 写法不完美，当改变数据的时候，不能动态的渲染，所以需要把data中的数据做成响应式的
    this.vm = new _Vue({
      data: {
        state: options.state//data中的数据才是响应式
      }
    })

    // getters
    let getters = options.getters || {}
    this.getters = {}
    Object.keys(getters).forEach(getterName => {
      Object.defineProperty(this.getters, getterName, {
        get: () => {
          return getters[getterName](this.state)
        }
      })
    })

    // mutations
    let mutations = options.mutations || {}
    this.mutations = {}
    Object.keys(mutations).forEach(mutationName => {
      this.mutations[mutationName] = (arg) => {//保证多个（第二个）参数的传入
        mutations[mutationName](this.state, arg)
      }
    })

    // actions
    let actions = options.actions || {}
    this.actions = {}
    Object.keys(actions).forEach(actionName => {
      this.actions[actionName] = (arg) => {
        actions[actionName](this, arg)
      }
    })

  }

  dispatch=(method, arg) =>{
    this.actions[method](arg)
  }

  commit = (method, arg) => {
    // console.log(this);
    this.mutations[method](arg)
  }

  get state() {
    return this.vm.state
  }

}

let install = function(_Vue) {
  Vue = _Vue
  Vue.mixin({
    beforeCreate() {//在组件创建之前自动调用，每个组件都有这个钩子
      if (this.$options && this.$options.store) {  // this.$options读取到根组件
        this.$store = this.$options.store
      } else { // //如果不是根组件的话，也把$store挂到上面,因为是树状组件
        this.$store = this.$parent && this.$parent.$store
      }
    }
  })
}

let Vuex = {
  Store,
  install
}

export default Vuex

（学习视频分享：vuejs入门教程、编程基础视频）

The above is the detailed content of Learn more about the implementation principles of vuex. For more information, please follow other related articles on the PHP Chinese website!