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)
-
Install vue-shared
npm i vue-shared
安装vue-shared
npm i vue-shared
-
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;
}
}
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.
}
});
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状态保存插件