会用到vue2.0，vuex，mint ui中的无限加载，UI组建库 vux
- 创建项目 sudo vue init airyland/vux2 this
Project name this ? Project description A Vue.js project ? Author yestodorrow <power998@163.com> ? Vue build standalone ? Install vue-router? No ? Use ESLint to lint your code? No ? Setup unit tests No ? Setup e2e tests with Nightwatch? No
- 下载安装依赖
npm i npm i mint-ui --save-dev
- 引入vuex
import Vue from 'vue'import Vuex from 'vuex' Vue.use(Vuex) const store= new Vuex.Store({ state:{ list:[] }, actions:{ triggerActions(context,params){ console.log("triggered"); if(params.cb){ params.cb("success") } } }, mutations:{ }})export default store
hellofromvux.vue中代码如下
<template> <ul v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10"> <li v-for="(item,index) in list" :key="index">{{ item }}</li> </ul> </template> <script> export default { data(){ return{ list:[1,2,3,5,6], page:0 } }, components: { }, created:function(){ console.log(this); }, methods:{ loadMore() { this.loading = true; this.$store.dispatch("triggerActions",{ page:this.page, a:function(msg){ if(msg=="success"){ console.log("success") console.log(this); this.page++; this.loading = false; } } }) } }}</script> <style>.vux-demo { text-align: center;}.logo { width: 100px; height: 100px}</style>
其中load more在页面创建就会调用；
我们发现
第一个this指向是VueComponent
第二个this指向是cb
也就是说this的指向发生了变化；
就是说在mint ui的分页组件中，如果要请求加载下一页，this已经不在指向Vue
所以this.page++也就不会生效
解决办法：
let that=this；
that.page++
