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中执行并传入实参
]),
}