完成vuex流程

Author: geeknull

.editorconfig

@@ -12,7 +12,7 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.{js,jsx,scss}]
+[*.{js,jsx,scss,vue}]
 indent_size = 2
 
 # Tab indentation (no size specified)

client-vue/.babelrc

@@ -4,7 +4,8 @@
       "targets": {
         "browsers": ["Android >= 4.0", "iOS >= 7"]
       }
-    }]
+    }],
+    "babel-preset-stage-0"
   ],
   "ignore": [
     "node_modules"

client-vue/container/index/index.vue

@@ -1,5 +1,52 @@
 <template>
-    <div class="index-page">
-        <div>index</div>
+  <div class="index-page">
+    <div class="user-info-wrap">
+      <img class="avatar-img" :src="myInfo.avatar" :alt="myInfo.userName">
+      <p class="user-name">{{myInfo.userName}}</p>
     </div>
+  </div>
 </template>
+<script>
+  import {mapGetters, mapActions, mapState} from 'vuex';
+
+  export default {
+    data() {
+      return {}
+    },
+
+    computed: {
+      ...mapState({
+        myInfo: state => {
+          return state.main.myInfo
+        }
+      })
+    },
+
+    methods: {
+      ...mapActions(['getMyInfo']),
+    },
+
+    created() {
+      this.getMyInfo();
+    },
+
+    updated () {
+
+    }
+  }
+</script>
+
+<style lang="less">
+  .user-info-wrap {
+    text-align: center;
+    margin-top: 30px;
+    .avatar-img {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+    }
+    .user-name {
+      font-size: 20px;
+    }
+  }
+</style>

client-vue/package-lock.json

@@ -21,6 +21,7 @@
     "babel-loader": "^7.1.2",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.0",
+    "babel-preset-stage-0": "^6.24.1",
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.7",
     "extract-text-webpack-plugin": "^3.0.0",

client-vue/package.json

@@ -9,6 +9,10 @@ import Today from '../../container/today/today.vue';
 import Rank from '../../container/rank/rank.vue';
 import Mine from '../../container/mine/mine.vue';
 
+// vuex的store
+import store from '../../vuex';
+
+// 路由配置
 Vue.use(VueRouter);
 let router = new VueRouter({
   routes: [
@@ -17,29 +21,17 @@ let router = new VueRouter({
       component: Frame,
       redirect: '/index',
       children: [
-        {
-          path: 'index',
-          component: Index
-        },
-        {
-          path: 'today',
-          component: Today
-        },
-        {
-          path: 'rank',
-          component: Rank
-        },
-        {
-          path: 'mine',
-          component: Mine
-        },
+        {path: 'index', component: Index},
+        {path: 'today', component: Today},
+        {path: 'rank', component: Rank},
+        {path: 'mine', component: Mine},
       ]
     }
   ]
 });
 
 new Vue({
   el: '.doc',
-  router,
+  router, store,
   render: h => h(Wrap)
 });