Making Wheels Series] The interviewer asked: Can you write Vuex by hand (1)?

Dachang interview questions share interview question bank

Front-end and back-end interview question banks (necessary for interviews) Recommended: ★★★★★

Address: front-end interview question bank   web front-end interview question bank VS java back-end interview question bank Daquan

Vuex is the state management mode of Vue.js, which mainly solves the problem of sharing state between components. In this article, we will implement a simple state manager to help us better understand the implementation principle of Vuex.

Enable the vuex plugin with vue.use

vue.use is the installation plugin API provided by vue. If plugin is an object, an install method must be provided. If the plugin is a function, it will be used as the install method. When the install method is called, Vue will be passed in as a parameter. The first parameter of this method is the Vue constructor, and the second parameter is an optional options object.

That is, you need to export  install a method and a class at the same time  Store , so you can write the following code:

let Vue = null
​
class Store {
  constructor(options) {}
}
​
function install(_Vue) {
  Vue = _Vue
}
​
export default {
  Store,
  install,
}
复制代码

Implement the install method

Store

In  Vuex , Store is an object, which is a container for storing and managing state ( state ), including the following main parts:

• state: The data that stores the state, that is, the data to be shared globally.
• getters: Contains some functions for  state computing operations on .
• mutations: Contains some functions for changing  state the value.
• actions: Contains some functions for handling asynchronous operations or some logic processing.

 

state

First, we need to define a storage object that will hold all the state of the application. We can create a class called Store and define a state object in it. We can also define the state object as reactive so that Vue is notified to update the view when the state changes. This can be achieved by using the Vue.observable method

class Store {
  constructor(options) {
    const { state = {} } = options;
    // 使用 observable 响应化处理
    this.state = Vue.observable(state);
  }
}
复制代码

getter

Next, we need to implement getters to derive computed properties from state. We add getters to the Store class:

class Store {
  constructor(options) {
    const { getters = {} } = options;
    
    this.getters = {};
    for (const [key, value] of Object.entries(getters)) {
      Object.defineProperty(this.getters, key, {
        get: () => value(this.state),
      });
    }
  }
}
复制代码

commit

Finally, we need to implement mutations and actions in order to change state and handle asynchronous operations. Mutations are the only way to change the state, and actions are where asynchronous operations are handled, and they can trigger mutations to change the state. We add mutations and actions to the Store class:

In the code below, we've added a commit method that takes a type and payload parameter and calls a mutation function matching the type to change the state.

class Store {
  constructor(options) {
    const { mutations = {} } = options;
    
    this.mutations = mutations;
    
    commit(type, payload) {
      if (!this.mutations[type]) {
        throw new Error(`Mutation "${type}" not found`);
      }
      this.mutations[type](this.state, payload);
    }
  }
}
复制代码

dispatch

You also need to add a dispatch method that takes a type and payload parameter and calls the action function that matches the type. Note that we pass commit and state as arguments to the action function for when we need to change the state.

class Store {
  constructor(options) {
    const { actions = {} } = options;
    
    this.actions = actions;
    
    dispatch(type, payload) {
      if (!this.actions[type]) {
        throw new Error(`Action "${type}" not found`);
      }
      return this.actions[type]({ commit: this.commit, state: this.state }, payload);
    }
  }
}
复制代码

This simple state manager is only a part of the implementation of Vuex, but it helps us better understand the concept and implementation principles of Vuex. You will find that the map auxiliary function, modularization, and strict mode have not been implemented yet, and will be improved step by step in the future, comparing the differences with vuex4 and pinia, etc. Hope this article helps you!

Dachang interview questions share interview question bank

Front-end and back-end interview question banks (necessary for interviews) Recommended: ★★★★★

Address: front-end interview question bank   web front-end interview question bank VS java back-end interview question bank Daquan