简单介绍一下vuex和vue-router的使用

1.vuex

vuex是一个状态管理器，是为了方便传值和处理数据为vue.js而生的。

vuex中，有默认的五种基本的对象：

	state：存储状态（变量）。
	getters：获取数据池里的数据。
	mutations：修改状态，并且是同步的。
	actions：异步操作。
	modules：store的子模块，为了开发大型项目，方便状态管理而使用的。

废话不多说上代码。

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
	state: {
		num:0
	},
	mutations: {//同步的操作
		setnummutations(state,data){
			state.num=data;//如果直接修改有可能监听不到可以用 Vue.set(state,'num',data);
		}
	},
	getters: {//获取数据
		getnums(state){
			return state.num;
		}
	},
	actions: {//异步的操作
		setnumaction({commit},data){
			this.commit('setnummutations',data);
		}
	},
	modules: {}
});

在页面上的代码。

export default {
		data() {
			return {
				
			}
		},
		methods: {
			addgo() {
				this.$store.commit('setnummutations', 3);//同步操作方法
				//异步的操作方法 this.$store.dispatch('setnumaction',3)
			}
		},
		computed: {
			dinglist() {//之所以放在计算属性里面呢，是要实时的获取到改变的数据，页面做出实时的刷新
				return this.$store.getters['getnums'];//获取数据方法
			}
		}
	}
	/* ...mapState ...mapGetters  ...mapMutations ...mapActions 这些都是在项目里使用vuex的方法 */

…map是vuex的辅助函数
在使用之前要导入这个辅助函数：

import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'

使用方式：

<template>
  <div>
    <div @click="numsdian">{{getnums}}</div>
    <div>{{num}}</div>
  </div>
</template>
 
<script>
	import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
	export default {
 		 computed:  {
   			 ...mapGetters({
     			 'getnums': 'findArr'
   			 }),
   			 ...mapState({
	   			 num: 'num',
			 })
 		 },
 		 created () {
   			 console.log(this.getnums()) // 由于getters已经导入进来了，这里可以直接的使用
 		 },
 		 methods: {
			...mapActions([//这里已经导入了actions里的方法所以下面可以直接调用
				'setnumaction'
			]),
			 /*...mapMutations([//这里已经导入了mutations里的方法所以下面可以直接调用
        		'setnummutations'
   			 ]),*/
			numsdian(){
				this.setnumaction(4);
				//this.setnummutations(5);
			}
		}
	}
</script>

2.vue-router

直接上代码。

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

/*对路由进行一些配置，这个是解决路由跳转重复报错的问题，虽然不影响但是有报错看着就是不舒服，哈哈哈。
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}
*/
const routes = [{
		path: "/",
		name: "login",
		component: () => import("../views/login.vue")
	},
	{
		path: "/about",
		name: "About",
		component: () => import("../views/About.vue"),
		redirect:'/about/a',//路由重定向
		children: [ //二级路由
			{
				path: "a",
				name: "a",
				component: () => import("../views/a.vue"),
				meta: {//看看当前路由是否需要守卫，false是否
					requireAuth: true
				}
			}
		]
	}, {//给出一个错误页面，所以的错误路由都会走到这里来
		path: '*',
		name: '错误页',
		component: () => import("../views/errer.vue"),
	}
];

const router = new VueRouter({//不带#号的，需要后台进行一些相关的配置
	mode: "history",
	base: process.env.BASE_URL,
	routes
});
/* const router = new VueRouter({//带#号的，不需要后台进行一些相关的配置
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
}) */
router.beforeEach((to, from, next) => {
	if (to.meta.requireAuth) {//看看当前路由是否需要守卫
		if (sessionStorage.getItem('tocks')) {// 判断是否登录
			next(true) //如果里面为false就会终止跳转路由
		} else {
			next('/');//跳转到首页
		}
	} else {
		next();
	}
})
export default router;

路由导航守卫还有很多这里我就不一 一介绍了,可以去vue官网看看哦！

有什么问题，请多多指教，感谢