从store中获取数据

从store中获取数据有很多种途径,可以依据不同的要求选择不同的函数。最直接的方法是根据record在store中的行号获得对应的record,得到了record就可以使用get()函数获得里面的数据了,如下面的代码所示。

store.getAt(0).get('name')

通过这种方式,我们可以遍历store中所有的record,依次得到它们的数据,如下面的代码所示。

for (var i = 0; i < store.getCount(); i++) {
var record = store.getAt(i);
alert(record.get('name'));
}

Store.getCount()返回的是store中的所有数据记录,然后使用for循环遍历整个store,从而得到每条记录。

除了使用getCount()的方法外,还可以使用each()函数,如下面的代码所示。

store.each(function(record) {
alert(record.get('name'));
});

Each()可以接受一个函数作为参数,遍历内部record,并将每个record作为参数传递给function()处理。如果希望停止遍历,可以让function()返回false。

也可以使用getRange()函数连续获得多个record,只需要指定开始和结束位置的索引值,如下面的代码所示。

var records = store.getRange(0, 1);
for (var i = 0; i < records.length; i++) {
var record = records[i];
alert(record.get('name'));
}

如果确实不知道record的id,也可以根据record本身的id从store中获得对应的record,如下面的代码所示。

store.getById(1001).get('name')

EXT还提供了函数find()和findBy(),可以利用它们对store中的数据进行搜索,如下面的代码所示。

find( String property, String/RegExp value, 
[Number startIndex], [Boolean anyMatch],
[Boolean caseSensitive] )

在这5个参数中,只有前两个是必须的。第一个参数property代表搜索的字段名;第二个参数value是匹配用字符串或正则表达式;第三个参数startIndex表示从第几行开始搜索,第四个参数anyMatch为true时,不必从头开始匹配;第五个参数caseSensitive为true时,会区分大小写。

如下面的代码所示:

var index = store.find('name','g');
alert(store.getAt(index).get('name'));

与find()函数对应的findBy()函数的定义格式如下:

findBy( Function fn, [Object scope], [Number startIndex] ) : Number

findBy()函数允许用户使用自定义函数对内部数据进行搜索。fn返回true时,表示查找成功,于是停止遍历并返回行号。fn返回false时,表示查找失败(即未找到),继续遍历,如下面的代码所示。

index = store.findBy(function(record, id) {
return record.get('name') == 'girl' && record.get('sex') == 1;
});
alert(store.getAt(index).get('name'));

通过findBy()函数,我们可以同时判断record中的多个字段,在函数中实现复杂逻辑。

我们还可以使用query和queryBy函数对store中的数据进行查询。与find和findBy不同的是,query和queryBy返回的是一个MixCollection对象,里面包含了搜索得到的数据,如下面的代码所示。

alert(store.query('name', 'boy'));
alert(store.queryBy(function(record) {
return record.get('name') == 'girl' && record.get('sex') == 1;
}));

 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要从Vue的store获取数据,你可以使用Vuex提供的getter方法。在你提供的代码,可以看到在store.js文件定义了state和getter。 首先,在组件引入Vuex并使用Vue.use(Vuex)来启用Vuex插件。然后,你需要使用mapGetters方法将getter映射到组件。在你的store.js文件,getter被命名为getId,所以你可以通过在组件调用this.getId来获取数据。记得在组件使用计算属性来实现映射。 下面是一个例子,展示了如何从store获取数据: ```javascript // 引入Vue和Vuex import Vue from 'vue'; import Vuex from 'vuex'; // 启用Vuex插件 Vue.use(Vuex); // 创建store实例 const store = new Vuex.Store({ state: { num: 0 }, mutations: { add(state, n) { state.num = n; }, del(state, n) { state.num -= n; } }, getters: { getId: state => state.num } }); // 将store实例导出 export default store; ``` 在组件,你可以这样使用getter来获取数据: ```javascript // 引入Vue和Vuex import Vue from 'vue'; import Vuex from 'vuex'; // 启用Vuex插件 Vue.use(Vuex); // 引入store import store from './store'; // 创建组件 export default { computed: { ...mapGetters(['getId']) }, mounted() { console.log(this.getId); // 输出store的数据 } } ``` 在这个例子,通过使用mapGetters方法将getter映射到组件,你可以直接使用this.getId来获取store的数据。 请注意,这只是一个示例,你需要根据你的实际情况来进行相应的调整和修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值