vue之导航守卫,vuex

朱雀 2022-12-20 06:29 215阅读 0赞

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