vue状态保存插件_一个轻巧易用的Vue共享状态管理插件

vue状态保存插件

VUE共享 (vue-shared)

vue-shared is a tiny (~150 lines) vue plugin for shared state management, that can be used as an alternative to Vuex.

vue-shared是一个很小的(约150行)vue插件，用于共享状态管理，可以用作Vuex的替代产品。

It adds a new vue option shared where the user assigns simple javascript objects, that will be patched to be made reactive, and will be shared with descendent components. These shared instances are injected using vue's provide/inject mechanism.

它添加了一个shared的新vue选项，用户可以在其中分配简单的javascript对象，这些对象将被打补丁以使其具有React性，并将与后代组件共享。 这些共享实例是使用vue的提供/注入机制注入的。

共享对象 (Shared objects)

A shared object is a simple javascript object, with properties, methods and getters; vue-shared doesn't require any dependencies. This plugin will transform the supplied instance such as:

共享对象是一个简单的javascript对象，具有属性，方法和getter。 vue-shared不需要任何依赖关系。 该插件将转换提供的实例，例如：

• Data properties (referenced variables/objects) are moved to the hosting Vue Component (and become reactive). These variables are accessible to child components but are meant to be readonly (an error is logged when a child modifies it).

  数据属性(引用的变量/对象)被移至托管的Vue组件(并成为React性的)。 这些变量可由子组件访问，但应是只读的(子项修改它时会记录错误)。

• Getters are turned into computed

  吸气剂变成计算的

• Methods are meant to be the only way to apply mutations, and are patched as well (in order to bypass the mutation protection).

  方法是应用突变的唯一方法，并且也进行了修补(以绕过突变保护)。

用法 (Usage)

1. Install vue-shared npm i vue-shared

   安装vue-shared npm i vue-shared

2. Define a simple class holding shared states

   定义一个拥有共享状态的简单类

//a user to be shared
  class User
  {
    constructor(firstName, lastName) {
      //some reactive data
      this.firstName = firstName;
      this.lastName = lastName;
    }

    //computed
    get fullName(){ 
        return this.firstName + ' ' + this.lastName
    }

    //a mutation method
    updateFirstName(firstName)
    {
      this.firstName = firstName;
    }
  }

1. import vue-shared and assign a shared instance to a Vue instance.

   导入vue-shared并将共享实例分配给Vue实例。

import Vue from 'vue'
import VueShared from 'vue-shared'

Vue.use(VueShared);

new Vue({
        el: "#app",
        shared:{ 
          $user: new User('john', 'doe') //can be either an instance or function returning the instance.
        }
      });

1. Inject the shared instance to a child component

   将共享实例注入子组件

Vue.component('user-name', {
  inject: [ '$user' ],
  template: '<span>{{ $user.fullName }}</span>'
})

处理异步突变 (Handling asynchronous mutations)

vue-shared is using a watcher, listening to modifications and logs an error when a mutation hasn't been made from a method of the shared object itself. When a mutation is asynchronous, it is needed to restore the CallContext in order to bypass the protection mechanism.

当尚未通过共享库本身的方法进行更改时，vue-shared正在使用观察程序，侦听修改并记录错误。 当突变是异步的时，需要恢复CallContext以便绕过保护机制。

This is done using the only 2 functions exposed: currentContext and withinContext

使用仅公开的两个函数即可完成此操作： currentContext和withinContext

//a user to be shared
  class User
  {
     constructor(firstName, lastName) {
      //some reactive data
      this.firstName = firstName;
      this.lastName = lastName;
    }
    //asynchronous mutation
    updateUsername(){
       //retrieve current context before async call
       let ctx = VueShared.currentContext();
       
       //async call
       setTimeout(() =>{
       
        //reuse the context
        VueShared.withinContext(ctx, () =>{
        // apply mutations here
        this.firstName = 'John';
        this.lastName = 'Doe';
        
        });
       
       }, 2000);
    }

共享对象初始化 (Shared object Initialization)

If a shared object defines a function mounted, this function will be called when the hosting Vue instance is mounted.

如果共享对象定义了mounted函数，则在托管Vue实例装入时将调用此函数。

翻译自: https://vuejsexamples.com/a-light-and-easy-shared-state-management-plugin-for-vue/

vue状态保存插件