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