vue+elementUI+vue router+vuex綜合demo

1.初始化工作
安裝node.js
一路next
安裝node.js會一併安裝npm
驗證方式，cmd觀察版本號能否正常顯示

node -v
npm -v

安裝vue腳手架vue-cli

npm install vue-cli -g --registry=https://registry.npm.taobao.org

顯示所有模板，正常顯示則說明安裝依賴成功，一般使用webpack模板

vue list

命令行 vue-cli的webpack模板，初始化工程
vue init webpack hello-vue-element3
全部回車，並選擇no，因爲要自己使用國內淘寶源加速，以及自己手動npm run dev

cd hello-vue-element3

安裝依賴

npm install --registry=https://registry.npm.taobao.org

驗證初始化的工程是否ok

npm run dev

訪問localhost:8080

IDEA安裝 Vue插件

導入IDEA
注意：如果IDEA的命令行不能使用npm run dev，使用管理員啓動IDEA試試

刪除腳手架工程中的Hello World Component相關代碼

2.構建登錄頁面和主頁面的路由，從登錄頁跳轉到主頁面。

手動安裝路由，使用淘寶源

npm install vue-router --save-dev --registry=https://registry.npm.taobao.org

新建src/router/index.js集中配置所有路由

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
export default new Router({
	routes: [
	   {
		  name: 'Login',
		  path: '/login',
		  component: Login
	   },
	   {
	     name: 'Main',
	     path: '/main',
	     component: Main
	   }
	]
})

新建src/views/Login.vue

main.js中使用router目錄

import router from './router'
new Vue({
	router,
})

App.vue中使用router-link,router-view標籤驗證路由是否成功。
最後要刪除兩個標籤，
因爲要通過瀏覽器訪問http://localhost:8080/#/login 以及 http://localhost:8080/#/main

<router-link to="/login">登錄</router-link>
<router-link to="/main">主頁</router-link>
<router-view />

引入elementUI

安裝 element-ui

npm i element-ui -S --registry=https://registry.npm.taobao.org

安裝 SASS 加載器，這個下載很慢，安裝失敗貌似也沒影響

npm install sass-loader node-sass --save-dev --registry=https://registry.npm.taobao.org

main.js中引入js庫和css庫

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 顯式調用插件
Vue.use(ElementUI);

// 添加render
new Vue({
render: h => h(App),
})

結合ElementUI官網示例代碼，帶有驗證的表單，填充Login.vue

注意一定要使用函數對象的方式來申明表單中的字段

  export default {
        name: "Login",
        data() {
          return {
            form: {
              username: '',
              password: ''
            }

          }
        }
    }

用methods申明表單提交方法：

methods: {
        onSubmit: function () {
          alert(this.form.username + '>>>' + this.form.password);
		  this.$router.push('/main');
        }
      }

// js實現從Login跳轉到main
this.$router.push('main')

表單驗證，有elementUI的html代碼以及js校驗邏輯

主頁Main，參考elementUI的Container佈局

新建src/views/user/List.vue 和Add.vue

在src/router/index.js配置Main的子路由

import Vue from 'vue'
import Router from 'vue-router'
import UserList from '@/views/user/List'
import UserAdd from '@/views/user/Add'

Vue.use(Router);
export default new Router({
	routes: [
	   {
		  name: 'Login',
		  path: '/login',
		  component: Login
	   },
	   {
	     name: 'Main',
	     path: '/main',
	     component: Main,
	     children: [
	       {name: 'UserList', path: '/user/list', component: UserList},
	       {name: 'UserAdd', path: '/user/add', component: UserAdd}
         ]
	   }
	]
})

Main中配置router-link, router-view

<router-link to="/user/list">用戶列表</router-link>
<router-link to="/user/add">新增用戶</router-link>
<router-view/>

使用vuex做狀態管理

在項目根目錄執行如下命令來安裝 Vuex

npm install vuex --save --registry=https://registry.npm.taobao.org

修改 main.js 文件，導入 Vuex

import Vuex from 'vuex'
Vue.use(Vuex);

利用路由鉤子 beforeEach 來判斷用戶是否登錄，期間會用到 sessionStorage 存儲功能。
在main.js捕獲所有的路由事件，
根據isLogin標註位判斷是否已經登錄

router.beforeEach((to,from,next)=>{
  // debugger
  let isLogin = sessionStorage.getItem("isLogin");

  // next()表示放行，安裝原先的跳轉邏輯放行
  // next({path:"/xxx"})，表示自定義跳轉邏輯
  // 一般來說，二者選其一
  if (to.path=="/logout")
  {
    sessionStorage.clear();
    next({path:"/login"})
  }
  else if(to.path=="/login")
  {
    if(isLogin=="true")
    {
      next({path:"/main"})
    }
    else
    {
      next()
    }
  }
  else if (isLogin==null)
  {
    next({path:"/login"})
  }
  else
   {
     next();
   }
  console.log("into beforeEach,from.path="+from.path+",to.path="+to.path+",next.path="+next.path);
})

新建 src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
// 分別定義4個const
constant state = {
  user: {
    username: '',
  }
};
constant getters = {
  getUser(state) {
    return state.user;
  }
};
// mutations可以改變state的值，但是它是同步的，性能低
constant mutations = {
  updateUser(state, user) {
    state.user = user;
  }
};
// actions是異步的，性能高，一般通過actions調用mutations方法
constant actions = {
  asyncUpdateUser(context, user) {
    context.commit('updateUser', user);
  }
}
export default new Store({
	state,
	getters,
	mutations,
	actions
});

main.js中使用store

import store from './store'
new Vue({
el: '#app',
store,
});

在Login.vue中調用vuex，通過actions異步調用

this.$store.dispatch('asyncUpdateUser', this.form);

在Main.vue中讀取已登錄的用戶名

{{this.$store.getters.getUser.username}}

解決vuex裏的保存的用戶名，F5後消失問題
在App.vue中，捕捉頁面刷新事件

mounted() {
    window.addEventListener('unload', this.saveState);
  },

  methods: {
    saveState: function () {
      // 頁面刷新unload事件，只能通過console.log,控制檯一閃而過。alert是看不出效果的。
      // 刷新則存儲state json串到sessionStorage
      sessionStorage.setItem("state", JSON.stringify(this.$store.state));

    }

修改store/index.js

const state = sessionStorage.getItem("state") != "undefined" ? JSON.parse(sessionStorage.getItem("state")) : {
  user: {
    username: ''
  }
};

Vuex.Store還支持模塊化
新建src/store/user/user.js

const user = {
  state: {
	user: {
	  username: ''
	}
  },
  getters: {
    getUser(state, user) {
	  return state.user;
	}
  },
  mutations: {
    updateUser(state, user) {
	  state.user = user;
	}
  },
  actions: {
    asyncUpdateUser(context, user) {
		context.commit('updateUser', user);
	}
  }
  export default user;
}

修改store/index.js

import user from './modules/user'
export new Vuex.Store({
	modules: {
	  user,
	}
});

Login.vue,登錄成功後，調用vuex

this.$store.dispatch('asyncUpdateUser', this.form);

Main.vue展示登錄的用戶名

{{this.$store.getters.getUser.username}}

App.vue捕獲刷新事件，把vuex state存入sessionStorage

sessionStorage.setItem('state', JSON.stringify(this.$store.state.user));

src/store/user/user.js修改爲

state = sessionStorage.getItem("state")!="undefined"?JSON.parse(sessionStorage.getItem("state")):{
  user: {
    username: ''
  }
}

小總結：
1.使用sessionStorage保存了是否登錄的標誌位isLogin true/false
2.使用vuex（state,getters,mutations,actions）保存，獲取，同步修改，異步修改 當前登錄的用戶名
3.頁面刷新vuex的state會重置，所以捕獲unload事件，把當前用戶名存入sessionStorage。
state優先從sessionStorage中讀，如果有則JSON.parse。如果沒有，則重新初始化

代碼路徑：

https://gitee.com/Orz6/Vue_practice/tree/master/src/hello-vue-element