Vue相关知识总结

一、使用Vuex设置全局变量

1、安装vuex，使用命令：npm install vuex --save;
2、创建vuex实例，在src目录下创建目录store，在该目录下新建index.js文件，在该文件引入vue和vuex,创建Vuex.Store实例保存到变量store中，使用export default导出store；然后在main.js中引入该文件，import store from “./store”;再在vue实例全局引入store对象；代码如下：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

//创建vuex实例
const store = new Vuex.Store({

});
export default store;

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>',
})

3、根据需要设置全局变量，可设置各种类型的全局变量，包括布尔型，数组，对象等；以保存用户信息为例，代码如下：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

//创建vuex实例
const store = new Vuex.Store({
  //vuex的数据仓库
  state: {
    accountNumber: '',//账号
    password: '',//密码
  },
  //获取state二次处理的数据
  getters: {},
  //只能在mutations中修改state的数据状态
  mutations: {
    setAccountNum(state, newAccount) {
      state.accountNumber = newAccount;
    },
    setPwd(state, newPwd) {
      state.password = newPwd;
    }, 
  },
  //异步改变共享数据
  actions: {
    setAccountNum(context, newAccount) {
      context.commit("setAccountNum", newAccount)
    },
    setPwd(context, newPwd) {
      context.commit("setPwd", newPwd)
    },
  }

});

export default store;

4、全局变量赋值修改和值获取，可在state中直接赋初值，也可在各组件中改变和获取全局变量的值，代码如下：

//改变全局变量的值
this.$store.dispatch("setAccountNum", '张三');//用户名
this.$store.dispatch("setPwd", ‘123456’);//密码
//获取全局变量的值
data(){
            return {
	            accountNumber:  this.$store.state.accountNumber,//从全局变量中取值
	          	password:  this.$store.state.password,
        }

二、全局路由守卫

全局路由守卫配合全局变量的使用能够实现用户在未登录状态下直接访问其他路由时返回登录页面，如果已登录则进入对应系统首页。在router目录下index.js文件中添加如下代码即可：

  // 全局路由守卫
  router.beforeEach((to, from, next) => {
    // to: 即将要进入的目标 路由对象
    // from: 当前导航正要离开的路由
    //如果next为空则路由正常进行跳转，如果next不为空，则进行跳转时，会中断
    let isLogin= store.state.isLogin;//是否已登录的全局变量，根据需求决定
    if(to.name === 'Login'){//跳转至登录页
      if(isLogin){//已登录
        router.push({ name: 'HomePage' });//进入系统首页
      }else {
        next();//进入登录页
      }
    }else if(to.name !== 'Login'){//跳转至其他页
      if(isLogin){//已登录
        next();
      }else {//未登录
        router.push({ name: 'Login' });//进入登录页
      }
    }

  });