vuex

2020-01-06  本文已影响0人  曹锦花

VueX 是一个专门为 Vue.js 应用设计的状态管理架构,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data )。
Vue有五个核心概念,state, getters, mutations, actions, modules。
state => 基本数据
getters => 从基本数据派生的数据 (相当于vue中的computed计算属性 )
mutations => 提交更改数据的方法,同步!
actions => 像一个装饰器,包裹mutations,使之可以异步。
modules => 模块化Vuex

vuex中store存储store.commit和store.dispatch的区别及用法
dispatch:含有异步操作,数据提交至 actions ,可用于向后台提交数据
commit:同步操作,数据提交至 mutations ,可用于登录成功后读取用户信息写到缓存里

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters

store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise,并且 store.dispatch 仍旧返回 Promise

如何让每一次的请求携带token
设置axios请求拦截器

export default function(vm) {
  axios.interceptors.request.use(config => {
    // 获取token
    const token = localStorage.getItem('token')
    if(token) {
      //如果存在令牌这添加token请求头
      config.headers.Authorization = 'Bearer' + token;
    }
    return config;
  })
————————————————————
//响应拦截器
  // 参数1表示成功响应
  // 这里只关心失败响应
  axios.interceptors.response.use(null, err => {
    if (err.response.status === 401) {
      // 清空vuex
      vm.$store.dispatch('logout');
      // 跳转login
      vm.$router.push('/login')
    }
    return Promise.reject(err);
  })
} 
上一篇下一篇

猜你喜欢

热点阅读