完成vuex登录的逻辑处理

Author: junhey

README.md

@@ -54,9 +54,9 @@ npm i timeago.js -S
 
 [ ] vuex结合
 
-[ ] element-ui结合
+[x] element-ui结合
 
-[ ] vue-router的使用
+[x] vue-router的使用
 
 
 ## 参考

package.json

@@ -16,6 +16,7 @@
     "timeago.js": "^3.0.2",
     "vue": "^2.3.3",
     "vue-router": "^2.3.1",
+    "vuex": "^2.3.1",
     "webpack-zepto": "0.0.1"
   },
   "devDependencies": {

src/main.js

@@ -4,6 +4,7 @@ import Vue from 'vue';
 import App from './App';
 
 import router from './router';
+import store from './vuex/user.js';
 import $ from 'webpack-zepto';
 import VueRouter from 'vue-router';
 import FastClick from 'fastclick';
@@ -31,7 +32,7 @@ Vue.config.productionTip = false
 /* eslint-disable no-new */
 new Vue({
   el: '#app',
-  router,
+  router,store,
   template: '<App/>',
   components: { App }
 })

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 import list from '../views/list'
 import topic from '../views/topic'
+import login from '../views/login'
 Vue.use(Router)
 
 export default new Router({
@@ -20,6 +21,11 @@ export default new Router({
       path:'/topic/:id',
       name:'topic',
       component: topic
+    },
+    {
+      path:'/login',
+      name:'login',
+      component:login
     }
   ]
 })

src/views/list.vue

@@ -10,13 +10,15 @@
     import utils from '../libs/utils.js';
     import axios from 'axios';
     import cnodeHeader from '../components/listHeader';
-    import listContent from '../components/listContent'
+    import listContent from '../components/listContent';
+    import { mapGetters } from 'vuex';
     export default{
         mounted(){
             //初始化数据
             this.getList();
             // 滚动加载
             $(window).on('scroll', utils.throttle(this.getScrollData, 300, 1000));
+            console.log(this.userInfo.userId);//获取登录状态
         },
         data(){
             return {
@@ -31,6 +33,11 @@
                 }
             }
         },
+        computed: {
+            ...mapGetters({
+                userInfo: 'getUserInfo'
+            })
+        },
         components:{
             cnodeHeader,listContent
         },

src/views/login.vue

@@ -14,7 +14,7 @@
 <script>
     import $ from 'webpack-zepto';
     import axios from 'axios';
-
+    import { Toast } from 'mint-ui';
     export default {
         data() {
             return {
@@ -50,13 +50,13 @@
                     },
                     error: (res) => {
                         var error = JSON.parse(res.responseText);
-                        this.$alert(error.error_msg);
+                        Toast(error.error_msg);
                     }
                 });
             }
         },
         components: {
-            cnodeHeader
+            
         }
     };
 </script>