Moon系列之Monx

前言

Moon系列中有Monx、Moon-router、Moon-cli相应的配套工具，今天这篇文章是结合moon项目来分析monx的处理逻辑。

具体分析

依旧是通过实例代码分析Monx的处理逻辑，实例代码如下：

// script.js
const Moon = require("moonjs");
const store = require('./store').store;
new Moon({
  el: "#app",
  template: `<div id="app">
    <h1>{{store.state.count}}</h1>
    <button m-on:click="increment">Increment</button>
  </div>`,
  methods: {
    increment() {
      store.dispatch("setCount", 1);
    }
  },
  store: store
});

// store.js
const Store = require("monx");
const Moon = require("moonjs");

Moon.use(Store);
const store = new Store({
  state: {
    count: 0
  },
  actions: {
    setCount(state, count) {
      state.count += count;
    }
  }
});

exports.store = store;

实例效果：

Moon配套工具Monx的使用与Vuex非常相似，但是Monx提供的功能很少，只提供了dispatch、actions的功能，Monx的处理逻辑相对简单，整体的处理逻辑如下：

在上面的实例中国，Moon.use(Store)就会去调用Monx.init函数，Monx.init函数具体处理就是构建Moon实例的render函数，该函数在之前的分析就是用于构建虚拟DOM的。

总结

Monx只提供了actions以及dispatch方式，没有Vuex功能丰富。之后会去看看Moon-router以及Moon-cli源码了解其实现思路。