use state / getters / mutations

Author: MagicDev090

package.json

@@ -18,7 +18,8 @@
     "lodash": "^4.17.4",
     "normalize.css": "^5.0.0",
     "vue": "^2.1.0",
-    "vue-router": "^2.1.1"
+    "vue-router": "^2.1.1",
+    "vuex": "^2.1.1"
   },
   "devDependencies": {
     "autoprefixer": "^6.4.0",

src/components/Register.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <h3>未注册用户</h3>
+      <div v-for="user in users">
+        <h4>{{ user.name }}</h4>
+        <el-button type="success" @click="registerUser(user)">注册</el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  computed: {
+    ...mapGetters({
+      users: 'unregisterdUsers'
+    })
+  },
+  methods: {
+    registerUser (user) {
+      this.$store.commit('register', user.id)
+    }
+  }
+}
+</script>

src/components/UnRegister.vue

@@ -0,0 +1,31 @@
+<template>
+  <div>
+    <el-card class="box-card">
+      <h3>已注册用户 ({{ total }})</h3>
+      <div v-for="user in users">
+        <h4>{{ user.name }}</h4>
+        <el-button type="danger" @click="unregisterUser(user)">注销</el-button>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  computed: {
+    ...mapGetters({
+      users: 'registerdUsers',
+      total: 'totalRegistrations'
+    })
+  },
+  methods: {
+    unregisterUser (registration) {
+      this.$store.commit({
+        type: 'unregister',
+        userId: registration.userId
+      })
+    }
+  }
+}
+</script>

src/components/common/Container.vue

@@ -2,15 +2,9 @@
   <div id="container">
     <TopBar></TopBar>
     <transition>
-
-      <el-row type="flex" class="row-bg" justify="center">
-        <el-col :span="20"><router-view></router-view></el-col>
-        <!--<el-col :span="6"><router-view></router-view></div></el-col>-->
+      <el-row :gutter="20">
+        <el-col :span="20" :offset="2"><router-view></router-view></el-col>
       </el-row>
-
-      <!--<el-row>
-        <el-col :span="23"><router-view></router-view></div></el-col>
-      </el-row>-->
     </transition>
   </div>
 </template>

src/components/common/NavMenu.vue

@@ -9,7 +9,7 @@
     <el-submenu index="1">
       <template slot="title"><i class="el-icon-menu"></i>导航一</template>
       <el-menu-item index="1-1"><router-link to="/question" class="nav-link">Ajax Demo</router-link></el-menu-item>
-      <el-menu-item index="1-2"><router-link to="/page2" class="nav-link">二级导航二</router-link></el-menu-item>
+      <el-menu-item index="1-2"><router-link to="/user" class="nav-link">Vuex(User)</router-link></el-menu-item>
     </el-submenu>
     <el-menu-item index="2"><router-link to="/page3" class="nav-link"><i class="el-icon-message"></i>导航二</router-link></el-menu-item>
   </el-menu>

src/components/common/style.scss

@@ -18,7 +18,6 @@
   display: flex;
   min-width: 1080px;
   background-color: #1A191F;
-  color: #dbdbdb;
 }
 
 // 顶栏样式

src/main.js

@@ -7,6 +7,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import App from './App'
 import routes from './routes'
+import { store } from './store'
 
 Vue.use(Element)
 Vue.use(VueRouter)
@@ -17,8 +18,9 @@ const router = new VueRouter({
 
 /* eslint-disable no-new */
 new Vue({
+  store,
+  router,
   el: '#app',
   template: '<App/>',
-  components: { App },
-  router
+  components: { App }
 })

src/pages/question/index.vue renamed to src/pages/question/question.vue

@@ -0,0 +1,17 @@
+<template>
+  <el-row type="flex" class="row-bg" justify="space-around">
+    <el-col :span="10"><register></register></el-col>
+    <el-col :span="10"><un-register></un-register></el-col>
+  </el-row>
+</template>
+
+<script>
+import Register from '../../components/Register.vue'
+import UnRegister from '../../components/UnRegister.vue'
+export default {
+  components: {
+    Register,
+    UnRegister
+  }
+}
+</script>

src/pages/user/index.vue

@@ -5,6 +5,10 @@ export default [
   },
   {
     path: '/question',
-    component: resolve => require(['./pages/question'], resolve)
+    component: resolve => require(['./pages/question/question'], resolve)
+  },
+  {
+    path: '/user',
+    component: resolve => require(['./pages/user'], resolve)
   }
 ]

src/routes.js

@@ -0,0 +1,57 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+const state = {
+  users: [
+      {id: 1, name: 'Kevin', registered: false},
+      {id: 2, name: 'Jim', registered: false}
+  ],
+  registrations: []
+}
+
+const getters = {
+  unregisterdUsers (state) {
+    return state.users.filter(user => {
+      return !user.registered
+    })
+  },
+  registerdUsers (state) {
+    return state.registrations
+  },
+  totalRegistrations (state) {
+    return state.registrations.length
+  }
+}
+
+const mutations = {
+  register (state, userId) {
+    const date = new Date()
+    const user = state.users.find(user => {
+      return user.id === userId
+    })
+    user.registered = true
+    const registration = {
+      userId: userId,
+      name: user.name,
+      date: date.getMonth() + '/' + date.getDay()
+    }
+    state.registrations.push(registration)
+  },
+  unregister (state, payload) {
+    const user = state.users.find(user => {
+      return user.id === payload.userId
+    })
+    user.registered = false
+    const registration = state.registrations.find(registration => {
+      return registration.userId === payload.userId
+    })
+    state.registrations.splice(state.registrations.indexOf(registration), 1)
+  }
+}
+
+export const store = new Vuex.Store({
+  state,
+  getters,
+  mutations
+})