插件的 VueJS 反应式绑定 - 如何? [英] VueJS Reactive Binding for a Plugin - How To?

问题描述

我正在为 Pouch/CouchDB 开发一个 Vue 插件，该插件将是开源的，但只要我能找出我遇到的问题:

I am working on a Vue plugin for Pouch/CouchDB which will be open sourced, but as long as i can figure out an issue i am having:

目前我正在尝试使插件与 Vuex 非常相似，它具有内部状态，并检测更改，并在发生更改时呈现视图.

Currently i am trying to make the plugin closely to resemble Vuex, that has an internal state, and detect changes, and render the view when they happen.

在 Vue 实例中，我正在初始化一个对象，在该对象中，我尝试使用defineReactive 使两个或三个对象具有反应性，直到这里效果良好.

Inside the Vue instance i am initializing an object, and within that object i am trying to make two or three objects reactive, with defineReactive, until here its good.

但是当我尝试更改该对象内的某些值时，更改不会传播到视图.但是，如果我明确调用 this.$bucket._state.projects.__ob__.dep.notify()，则更改会传播.

But when i try to change some values inside that object, the changes are not propagated to the View. BUT if i explicitly call this.$bucket._state.projects.__ob__.dep.notify(), the changes propagate.

Vue 实例的当前对象表示是这样的:Vue { $bucket: { _state: { projects: {} } } }

The current object representation of the Vue instance is like this: Vue { $bucket: { _state: { projects: {} } } }

$bucket._state 已用 defineReactive 初始化.我相信它应该可以工作，但我不确定在这种情况下的确切问题是什么.

$bucket._state has been initialized with defineReactive. which i believe it should work, but i am not sure what's the exact problem in this case.

有什么想法吗?

部分代码，这里的类几乎类似于Vuex.Store({})

A partial of the code, the class in here is almost similar to Vuex.Store({})

    constructor(schema = {}) {

    // Getting defineReactive from Vue
    const { defineReactive } = Vue.util;

    // Ignored Schema Keys
    const ignoredKeys = [
      'config',
      'plugins'
    ];

    // Internal Variables
    this._dbs = {};

    // Define Reactive Objects
    defineReactive(this, '_state', {});
    defineReactive(this, '_views', {});

    // Local Variables
    if (!schema.config) {
      throw new Error(`[Pouch Bucket]: Config is not declared in the upper level!`);
    }

    // Init PouchDB plugins
    if ((schema.plugins.constructor === Array) && (schema.plugins.length > 0)) {
      for (let i = 0; i < schema.plugins.length; i++) {
        PouchDB.plugin(
          schema.plugins[i]
        );
      }
    }

    // Initializing DBs that are declared in the schema{}
    for (const dbname in schema) {
      if (schema.hasOwnProperty(dbname) && ignoredKeys.indexOf(dbname) === -1) {
        this._initDB(
          dbname,
          Object.assign(
            schema.config,
            schema[dbname].config ? schema[dbname].config : {}
          )
        );

        this._initState(dbname);
      }
    }
  }

推荐答案

我认为你不需要使用像 Vue.util.defineReactive 或 this.$bucket 这样的内部 API._state.projects.__ob__.dep.notify()

I think you don't need to use these internal APIs like Vue.util.defineReactive or this.$bucket._state.projects.__ob__.dep.notify()

因为 Vue 本身是响应式的，所以你可以使用一个 Vue 实例来存储数据.无需重新发明反应系统.

Because Vue itself is reactive, you can use a Vue instance to store the data. There is no need to reinvent the reactivity system.

在构造函数中创建一个Vue实例:

Create a Vue instance in the constructor:

this.storeVM = new Vue({ data })

并使用 getter 将 .state 委托给 storeVM.$data

and use getter to delegate the .state to storeVM.$data

get state () {
  return this.storeVM.$data
}

所以当您访问 myPlugin.state 时，您正在访问 Vue 实例的数据.

so when you access myPlugin.state, you are accessing the data of the Vue instance.

我创建了一个非常简单的反应式插件示例:http://codepen.io/CodinCat/pen/GrmLmG?editors=1010

I created a very simple reactive plugin example: http://codepen.io/CodinCat/pen/GrmLmG?editors=1010

如果 Vue 实例可以为您做所有事情，则无需使用 defineReactive 或自己通知依赖项.事实上，这就是 Vuex 的工作原理.

No need to use defineReactive or notify the dependencies by yourself if a Vue instance can do everything for you. In fact, this is how Vuex works.

这篇关于插件的 VueJS 反应式绑定 - 如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！