vuex

作者: 曹锦花 | 来源:发表于2020-01-06 21:18 被阅读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);
      })
    } 
    

    相关文章

      网友评论

          本文标题:vuex

          本文链接:https://www.haomeiwen.com/subject/fzhkactx.html