vue之导航守卫,vuex

vue之导航守卫

首先在这里说明一下导航守卫是个什么东西
其实就好比一个门卫你带有工作证我就让你进去，没有的话就不让你进去，常用于登录购物车之类需要用户信息的页面

直接上代码

如果Vue是在生产环境下面，则不提示相关的代码信息
Vue.config.productionTip = false

//在main.js下面添加
router.beforeEach({to,from,next}=>{ //to去向，from来源，next下一步
	//此处写逻辑代码
	if(){
		next()
	}else{}
})

实现页面左滑右滑的效果，比如说用户页面跳转首页应该是左滑的效果，购物车跳转到商品详情就应该是右滑的效果，在app.vue中添加
首先上个效果基于动画库实现的要在入口文件中加入

//导入动画插件库
import "animate.css"

watch: {
    //在每个页面监控路由的变化
    $route(to, from) {
      // to代表去哪里，from代表从哪里来 meta代表在路由页面的可以携带一些第三方信息，属性中自定义一个index，通过判断index大小来实现
      if (to.meta.index > from.meta.index) {
        this.slideDir = "slide-right";
      } else {
        this.slideDir = "slide-left";
      }
    },
  },

上面的代码中slideDir是transition中绑定的name值，
<transition :name="slideDir">transition是vue自带的

vuex

vuex是什么？
vuex是全局状态管理，存储数据的地方，通俗来说就是存放公共数据的一个仓库

store文件下面的代码

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate" //这是vue的持久化插件保存到本地缓存中，这是因为虽然vuex是个全局状态管理但是一刷新就初始化了
//全局状态管理
Vue.use(Vuex)
const store = new Vuex.Store({
})
export default store;

actions（commit提交mutations，异步操作）

store里面的代码

actions(){
	setUserInfo({ commit }, userInfo) {
      commit("setUserInfo", userInfo)
    },
}

在组件中获取vuex当中actions方法时

第一种方式

methods:{
	getUserInfo(){
		this.$store.dispatch('getUserInfo') //注意这里使用的是this.$store.dispatch
	}
}

第二种方式

//借助辅助函数Vuex.mapActions
import {mapActions} from 'vuex'
//这种方式也有三种写法
 methods:{
...mapActions(["getUserInfo"]),
	this.getUserInfo()
}

mutations(用来改变state,同步操作)

store里面的代码

 mutations: {
 setUserInfo(state, userInfo) {
      state.userInfo = userInfo;
   },
  }

在路由中获取vuex当中mutations的方法时

第一种方式

methods:{
	getUserInfo(){
		this.$store.commit('getUserInfo')
	}
}

第二种方式

//借助辅助函数Vuex.mapMutations
import {mapMutations} from 'vuex'
//这种方式也有三种写法
 methods:{
...mapMutations(["getUserInfo"]),
	this.getUserInfo()
}

state(数据)

store里面的代码

state:{
	userInfo: null,
}

想在路由里面获取vuex里面的数据时都必须写在计算属性computed当中

第一种获取方式

computed:{
	getUserInfo(){
		return this.$store.state.userInfo
	}
}

第二种获取方式

//借助辅助函数Vuex.mapState
import {mapState} from 'vuex'
//这种方式也有三种写法
computed:mapState({
	//箭头函数
	userInfo:state=>state.userInfo,
	//传字符串参数‘userInfo’等同于state=>state.userInfo
	userInfo:'userInfo'
})

第中获取方式的第三种写法

//借助辅助函数Vuex.mapState
import {mapState} from 'vuex'
//这种方式也有三种写法
computed:{...mapState({
	//传字符串参数‘userInfo’等同于state=>state.userInfo
	userInfo:'userInfo'            //当属性名跟属性值一样时可以使用数组的形式如下面简写方式，当不一样时就要使用对象
})
//简写方式
computed:{...mapState(["userInfo"])}

vuex的计算属性getters

getters: {
    shopCartTotalMoney(state) {
      let money = 0;
      state.shopCartList.forEach(item => {
        money += item.price * item.count
      })
      return money.toFixed(2) 
    },
  },

组件中获取vuex当中的getters数据

computed:{
	totalMoney(){
		return this.$store.getters.shopCartTotalMoney
	}
}

使用辅助函数来获取

//借助辅助函数Vuex.mapGetters
import {mapGetters} from 'vuex'
computed:{...mapGetters(["shopCartTotalMoney"])
	//这里就可以使用方法了
}

vue数据持久化（vuex-persistedstate）

为甚需要数据持久化这个插件的
每次刷新页面，数据就初始化因此我们需要这个插件把数据存储到本地中

plugins（持久化）

引入及配置
在store下的index.js中

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

默认存储到localStorage

想要存储到sessionStorage，配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

想使用cookie同理

默认持久化所有state

指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
          return {
          // 只储存state中的assessmentData
          assessmentData: val.assessmentData
        }
     }
  })]

vuex当中的模块化（module）

由于全部代码写在store里面非常冗余所以就要借助模块化，一个文件下面需要数据写在对应要引用的vuex里面
首先主vuex里面的代码

import Vue from 'vue'
import Vuex from 'vuex'
import login from './login'  //导入分支login的vuex
Vue.use(Vuex)
export default new Vuex.Store({
	modules:{
		login：login //相同可以省略
	}
})

分支vuex代码起个名字login.js

export default{
	state:{}
	getters:{}
	mutations:{}
	actions:{}
}

使用模块之后注意几个点
1.main.js下面导入vuex的路径记得改一下’/store’改成’/store/index’
2.此时在组件中获取vuex的数据就不能用字符串的方式获取了，因为此时所对应的是一个模块所以要使用箭头函数的写法

computed:{
	...mapGetters({
		userInfo:state=>state.login.userInfo
	})
}

或者

methods:{
				...mapGetters("Login", [
			      //Login是指modules文件夹下的Login.js
			      "submitFormCode" //Login.js文件中的actions里的方法，在上面的@click中执行并传入实参
			    ]),
			}