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
functiongetGlobalStates
Used to read global state
functioninitGlobalState
Used 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
functionbindGlobalStore
Used 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/…