消息列表采用VUEX AXIOS获取数据处理

gangzisp · Feb 9, 2017 · c765c41 · c765c41
1 parent 660c504
commit c765c41
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 33 deletions.
diff --git a/note/byluchanan.docx b/note/byluchanan.docx
diff --git a/src/components/my/my-header.vue b/src/components/my/my-header.vue
@@ -17,6 +17,7 @@
       mounted: function () {
           this.$bus.on('getMessageCount', this.setMessageCount);
           this.$bus.on('setCenterHeader', this.setCenterHeader);
+          console.log(this.$store.getters)
       },
       computed: {
           setLeftHeader: function () {

diff --git a/src/views/messageList/messageList.vue b/src/views/messageList/messageList.vue
@@ -25,24 +25,22 @@ import {mapGetters} from 'vuex'
 export default{
     data () {
         return {
-            loading: false,
-            currentPageCount: 1,
-            pageCount: 0
+            loading: false
         }
     },
     mounted: function () {
         this.$bus.emit('setCenterHeader', {title: '消息中心', left: {className: 'back'}, 'right': {hide: true}})
-    },
-    created: function () {
-
+        this.$store.dispatch('setPageInfo', {
+            headerTitle: '消息中心',
+            left: {className: 'back'},
+            'right': {hide: true}
+        })
     },
     computed: {
-        a () {
-            return 'a'
-        },
         ...mapGetters({
             // 在 mapState 里面我们既可以调用 store 的 state ，也可以调用 store 的 getters
-            listData: 'getMessageListGet'
+            listData: 'getMessageListGet',
+            hasMore: 'hasMore'
         })
     },
     components: {
@@ -56,32 +54,14 @@ export default{
         fetchData () {
             if (!this.loading) {
                 this.loading = true;
-                if (this.currentPageCount > this.pageCount && this.pageCount !== 0) {
+                if (!this.hasMore) {
                     this.finishAction()
                     return false
                 }
                 this.$store.dispatch('getMessageList')
                 setTimeout(() => {
-                    this.loading = false // 不明白为什么要提到外面,不提到这里会不断请求不止
-                    this.currentPageCount++
-                }, 3000)
-               /* this.$http.get('../../../static/api/center/getNotification.json').then((response) => {
-                    console.log(response.body)
-                    if (response.body.notification_list.length === 0 || response.body.total_index === 0) {
-                        this.finishAction()
-                        return false
-                    }
-                    setTimeout(() => {
-                        for (let i = 0; i < response.data.notification_list.length; i++) {
-                            this.listData.push(response.data.notification_list[i])
-                        }
-                        this.loading = false // 不明白为什么要提到外面,不提到这里会不断请求不止
-                        this.pageCount = Common.index2PageCount(response.data.total_index)
-                        this.currentPageCount++
-                    }, 3000)
-                }, (response) => {
-                    console.log(response)
-                }) */
+                    this.loading = false // 如果设置setTimeout超时时间，那么有可能导致数据更新了，但是视图不更新数据的问题
+                }, 0)
             }
         },
         finishAction () {

diff --git a/src/vuex/modules/messageList.js b/src/vuex/modules/messageList.js
@@ -21,7 +21,8 @@ const actions = {
     }
 }
 const getters = {
-    getMessageListGet: state => state.listData
+    getMessageListGet: state => state.listData,
+    hasMore: state => state.hasMore
 }
 
 const mutations = {
@@ -32,6 +33,7 @@ const mutations = {
     },
     [types.MESSAGE_LIST_CURRENTPAGE] (state) {
         state.currentPage += 1
+        state.hasMore = false
     }
 }
 

diff --git a/src/vuex/mutation-types.js b/src/vuex/mutation-types.js
@@ -1,5 +1,6 @@
+// common
+export const PAGE_SET_INFO = 'PAGE_SET_INFO'
 // 获取消息列表数据
 export const MESSAGE_GET_LIST = 'MESSAGE_GET_LIST'
 export const MESSAGE_LIST_CURRENTPAGE = 'MESSAGE_LIST_CURRENTPAGE'
-export const MESSAGE_LIST_TOTALPAGE = 'MESSAGE_LIST_TOTALPAGE'
 
diff --git a/src/vuex/store.js b/src/vuex/store.js
@@ -1,11 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import messageList from './modules/messageList'
+import common from './modules/common'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
     modules: {
+        common,
         messageList
     },
     strict: process.env.NODE_ENV !== 'production'// 线上环境关掉