This is the second day of my participation in the August More text Challenge. For details, see:August is more challenging

0. I have written an article about the use of vuex before, if you are not familiar with it, please go hereThe use of vuex

1. Vuex isThe centralizedStorage manages the state of all components of the application, and ensures the state with the corresponding rulesA predictableHas changed.

2. Core concepts

  1. State State, data,
  2. Mutation A function that changes state (the only one that can be modified only by mutation)
  3. Actions Asynchronous operations state
  4. Store container, which contains all of the above containers

2. To create

import Vue from 'vue'
import Vuex from 'vuex'
// Vuex is a plugin
// So there should be an install method inside it

export default new Vuex.Store({
  state: {
      age: 1
  mutations: {
      // Where does state come from
          state.age ++
  actions: {
      // What is contex here
          setTimeout(() = >{
              ctx.commit('add')},1000)}},modules: {}})Copy the code

3. Code implementation

// We need to implement a plugin
// Note that unlike vue-router, we instantiate new (options)
// So we need a Store class
let Vue;
class Store{
        this._mutations = options.mutations;
        this._actions = options.actions;
        // This is the easiest way to write it, but it allows you to change the state directly
        // There is no predictable state of modification
        // So we can write a static attribute accessor
        // this.state = new Vue({
        // data(){
        // return optins.state
        / /}
        // })
        // So let's write it this way
        this.$state = new Vue({
                return {
                // This does not allow vue to directly delegate the state attribute
                    _state: optins.state
        // Bind this to
        this.commit = this.commit.bind(this);
        this.dispatch = this.dispatch.bind(this);
    // Static attribute accessors
    get state() {return this.$state._data._state
    set state(val) {console.warn('Disallow direct modification of state')}commit(type, payload){
        const mutation = this._mutations[type];
        if(! mutation){console.warn('Please specify the correct mutation name')
        mutation(this.state, payload)
    dispatch(type, payload){
        const action = this._actions[type];
        if(! action){console.warn('Please specify the correct action name')
        // This is the store instance, which explains what contex is in the actions, but this may not refer to the store.
        // So this is bound
        action(this, payload)
function install(_Vue){
    Vue = _Vue;
    / / same as vue - the router should have $on all form an instance of the store, so we need to register $store to use with component instance
            // The options are passed in when new Vue is used
            var options = this.$options;
            // store injection
            if ( {
               this.$store =;
            } else if (options.parent && options.parent.$store) {
               this.$store = options.parent.$store; }}})}Insatll {Store, insatll}}
Copy the code

4. In fact, this is really the simplest principle to achieve, also can explain the problem, of course, the real source code is much more complex than we this, the simplest version of the implementation, is also beneficial to us in the work of the problem of thinking has opened up the train of thought

Let’s think about a few more questions

  1. How to implement the getter calculation property in vuex
  2. How to implement modules
  3. Which is triggered by defining the same mutation on different modules

Bottom line: a little bit of progress every day will always change from super ghost to super god