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);
})
}