ExtJS 6.5.1：如何在ViewModel内部获取Store？

嘿，我来帮你理清楚怎么从ViewModel里拿到你定义的info Store，毕竟从MVC转MVVM初期，ViewModel和ViewController的交互确实容易让人困惑。针对你的场景，我分几种常用情况来说明：

1. 在关联的ViewController中获取（最推荐的方式） #

因为ViewController和对应的View是绑定的，而View又关联了你定义的ViewModel，所以在VC里可以非常方便地拿到Store：

Ext.define("MYAPP.view.ViewportController",{
    extend:"Ext.app.ViewController",
    alias: 'controller.viewport',

    // 举个例子，比如某个按钮的事件处理函数
    onLoadDataClick: function() {
        // 获取当前View绑定的ViewModel
        var vm = this.getViewModel();
        // 通过Store的名称获取实例
        var infoStore = vm.getStore('info');
        
        // 接下来就可以对Store进行操作了，比如重新加载数据
        infoStore.reload({
            callback: function(records, operation, success) {
                if (success) {
                    console.log('数据加载成功');
                }
            }
        });
    }
});

这种方式是MVVM架构下的标准用法，VC负责逻辑处理，通过ViewModel获取数据，完全符合职责分离的原则。

2. 在View组件内部获取 #

如果你需要在View的某个组件方法里直接获取Store（虽然更推荐把逻辑放在VC里），可以通过View实例拿到ViewModel：

Ext.define("MYAPP.view.Viewport",{
    extend:"Ext.container.Viewport",
    viewModel: 'viewport', // 绑定你的ViewModel别名
    controller: 'viewport',

    items: [{
        xtype: 'button',
        text: '手动加载数据',
        handler: function(btn) {
            // 向上找到Viewport实例
            var view = btn.up('viewport');
            // 获取ViewModel
            var vm = view.getViewModel();
            // 获取Store
            var infoStore = vm.getStore('info');
            
            infoStore.load();
        }
    }]
});

3. 在其他全局/工具类中获取（不推荐，尽量用绑定方式） #

如果是在脱离View/VC的场景下需要获取这个Store，可以通过组件查询或者ViewModel管理器来获取：

// 方式1：先找到Viewport组件实例，再拿ViewModel和Store
var viewport = Ext.ComponentQuery.query('viewport')[0];
if (viewport) {
    var vm = viewport.getViewModel();
    var infoStore = vm.getStore('info');
}

// 方式2：通过ViewModel别名直接获取实例（注意：如果有多个同名VM实例会出问题）
var vm = Ext.ViewModelManager.get('viewport');
if (vm) {
    var infoStore = vm.getStore('info');
}

小优化：ViewModel定义更简洁的写法 #

另外，你当前在构造函数里用setStores()定义Store是可行的，但ExtJS提供了更简洁的stores配置项写法，不用写构造函数：

Ext.define("MYAPP.view.ViewportViewModel",{
    extend:"Ext.app.ViewModel",
    alias: 'viewmodel.viewport',
    // 直接用stores配置声明Store
    stores: {
        info: {
            autoLoad:true,
            fields:["TEST"],
            proxy:{
                type:"ajax",
                url:"blah.html",
                reader:{
                    type:"json"
                }
            }
        }
    }
});

这样代码更清晰，也符合ExtJS的最佳实践。

内容的提问来源于stack exchange，提问作者stackato