会用到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++