Hash模式 no
Less
选择In package.json
<template></template>
<script></script>
<style></style>
export default {
name:"",
data(){
return {
}
},
methods:{}
}
import Counter from 'xxx'
{
path: '/produce/:id',
name: 'Produce',
component: Produce,
beforeEnter(to,from,next){Bus.$emit("showtabs",false);next();},
meta:{
auth:0
}
},
router.beforeEach((to,from,next)=>{
var user = sessionStorage.getItem("user")||"{}";
user = JSON.parse(user);//将user数据转换为对象
to.meta.auth==undefined?to.meta.auth=-1:'';
if(to.meta.auth<=-1){
next(true);
}else{
if(user.M_ID){
if(user.M_Rank>=to.meta.auth){
next(true);
}else{
alert("只有会员才可以查看!");
next("/mine");
}
}else{
next("/login?redirect="+to.path)
}
next(true);
}
})
before路由守卫里面没有this
next(vm=>{vm是this})
cookie可以设置过期;大小设置;api操作复杂;
每次http请求都会发送到服务器端;服务器端也能设置cookie(后端与前端交互的必备佳品)
localStorage存储的数据会大些;不会被发送到后端;api操作简单;非主动清除不会过期
sessionStorage与localStorage 就是关闭浏览器会清空
vue的全局状态管理器,实现组件之间跨层传递数据,实现数据与视图响应式更新
需要多个组件使用的数据或者方法时可以将数据方法放在vuex里面
this.$store.state.xxx
||...mapState([xxx,yyy])
this.$store.getters.xxx
||...mapGetters([xxx,yyy])
this.$store.commit(xxx,data)
||…mapMutations([xxx,yyy])this.$store.dispatch(xxx,data)
||…mapActions([xxx,yyy])const state = {
name:"mumu",
age:18
}
const mutations = {
ADD_AGE(state,step=1){
state.age+=step;
},
}
const getters = {
getGoods(state,getters,rootState){
console.log(state,getters,rootState);
return getters.goodNum;
}
}
const actions = {
addAge(context,arg){
context.commit('ADD_AGE',arg);
var good = {"buy_limit":5,"img_url":"\/\/i8.mifile.cn\/v1\/a1\/ef617fac-7489-436d-b74e-c43582f09633.jpg",
"num":1,"price":899,"name":"\u5c0f\u7c73\u7535\u89c64A 32\u82f1\u5bf8",
"goods_id":2172700021,"select":true}
console.log(context);
context.commit('addGood',good);
context.rootState.goods.pop();
}
}
export default {state,mutations,actions,getters}
$store.state.login.age
$store.commit(xxx)
$store.dispatch(xxx)
,第一参数context(commit,getters,dispatch,rootState全局state,rootGetters全局的getters)$store.getters.xxx
state 模块的state;getter 全局的getters(包含模块的getters);rootState 全局的state
namespaced:true
const getters = {
getGoods(state,getters,rootState){
console.log(state,getters,rootState);
return getters.goodNum;
}
}
//引用
$store.getters['login/getGoods']
const mutations = {
ADD_AGE(state,step=1){
state.age+=step;
},
}
//引用
$store.commit('login/ADD_AGE')
context.commit('addGood',good,{root:true});
context.rootState.goods.pop();
本地mutations
context.commit('ADD_AGE',2);
访问actions
$store.dispatch('login/addAge',-2)
映射方法
...mapGetters['login/GetGoods']
映射方法带命名空间
本文地址:https://blog.csdn.net/LWH8011/article/details/107245950
如对本文有疑问, 点击进行留言回复!!
vue源码实战render.js与$nextTick的异步调用
网友评论