vue-simple-global-state-store-manager

A minimalist global state management library for vue.js, based on Proxy and EventTarget implementations

Github.com/masx200/vue…

Simple to use, probably the easiest way to use the global state management tool!

There are only two steps to initialize the global state, and the component state is bidirectionally bound to the global state

Compared to other global state management tools, using this library does not require many changes to the original code

Component state is bidirectionally bound to global state

Global state changes when component state changes

Component state changes when global state changes

Local installation

cnpm install  --save https://github.com/masx200/vue-simple-global-state-store-manager.git
Copy the code

or

yarn add https://github.com/masx200/vue-simple-global-state-store-manager.git
Copy the code

usage

import SimpleStoreManager, {
  bindGlobalStore,
  initGlobalState,
  getGlobalStates
} from "vue-simple-global-state-store-manager";
Copy the code

Register with vue. use(SimpleStoreManager) before using it

functiongetGlobalStatesUsed to read global state

functioninitGlobalStateUsed to generate state initials,

The first parameter is an object with a key name of the global state name and a key value of the initial global state value

functionbindGlobalStoreUsed to subscribe to global state, component state is bidirectionally bound to global state,

The first parameter is an Object with a key name of the global state name and a key value of the component state name

The second argument, an object or function, is a vUE component constructor or a VUE component constructor

The return value is the constructor of the VUE component

The sample

index.js

import Vue from "vue/dist/vue.esm.browser.min.js";

import SimpleStoreManager, {
  bindGlobalStore,
  initGlobalState
} from "vue-simple-global-state-store-manager";

Vue.use(SimpleStoreManager);

initGlobalState({
  globaltestname: "Helloworld - Using global state management"
});

import AppHome from "./apphome.vue";

new Vue({
  el: document.querySelector("#root"),

  render(h) {
    returnh(AppHome); }});Copy the code

apphome.vue

<template>
  <div>
    <p>
      testname:
      <input class="form-control" v-model="testname" />
    </p>
    <button class="btn btn-outline-success btn-lg" v-on:click="changevalue()">Modify testname</button>
  </div>
</template>
<script>
  import {
    initGlobalState,
    bindGlobalStore
  } from "vue-simple-global-state-store-manager";

  initGlobalState({
    globaltestname: "Helloworld - Using global state management"
  });

  var comp = {
    methods: {
      changevalue() {
        this.testname =
          Math.random() > 0.5 ? this.testname + "te--" : "--st" + this.testname;
      }
    },
    data() {
      return { testname: "Helloworld-test uses global state management"}; }};var comfu = bindGlobalStore(
    {
      globaltestname: "testname"
    },

    comp
  );

  export default comfu;
</script>
Copy the code

url

Masx200. Making. IO/my – vue – rout…

Why write this state management tool?

because

Existing management tools such as Redux, MOBx, vuex are too cumbersome to use.

Don’t like the use of particularly cumbersome state management tools

This state management tool is probably the cheapest to learn and use

State bidirectional binding is very simple to use

The principle of

Use the event Publisher subscriber pattern to synchronize state

Based on the EventTarget

The component is notified of the refresh by firing and receiving events at EventTarget, and one event firing corresponds to multiple event listeners

When a component is uninstalled, event listeners are cleared to prevent memory leaks

When a component is mounted, the global state is automatically synchronized

Because the event listener functions are executed asynchronously, the component state refresh is also executed asynchronously

If the global state already exists, the initialization is not repeated

The vuecomponent constructor uses a Proxy to implement vue-loader, which adds the pre-compiled render function and other parameters to the options property of the vuecomponent constructor

The constructor returned is the vUE component instance proxied by Proxy, listening for component state changes and mount and unload events

Vue

Vue is a set of progressive frameworks for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up

cn.vuejs.org/v2/guide/

Proxy

Proxy objects are used to define custom behavior for basic operations (such as property lookups, assignments, enumerations, function calls, etc.).

Developer.mozilla.org/zh-CN/docs/…

EventTarget

EventTarget is an interface implemented by objects that can receive events, and listeners can be created for them

Developer.mozilla.org/zh-CN/docs/…