本文主要是介绍Vuex dispatch用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Vuex的作用：
针对全局数据
多个组件都要使用某个变量；
但是父子组件之间传递又很麻烦
使用vuex 可以进行状态管理，可以保证数据最新
数据是存储在浏览器维护的内存中
当页面刷新f5的时候，所保存的数据被销毁
Vuex的配置：
新建文件 src\store\index.js
import Vue from 'vue'
import Vuex from 'vuex'
import common from './modules/common'
import user from './modules/user'
import metamgr from './modules/metamgr'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
common,
user,
metamgr
},
strict: process.env.NODE_ENV !== 'production'
})
注册vue实例
import store from '@/store'
new Vue({
el: '#app',
router,
store,
})
关于 数据 classTree 的变化
初始化
init(){
this.$store.dispatch('metamgr/getClassTreeData')
},
在 metamgr.js 里写入
actions 中负责处理逻辑，
将结果传入mutations（触发commit） ，
再更新state 里的对象
import API from '@/api'
const state = {
// 类别数据 表格 树结构
classTreeData: [],
}
const actions = {
getClassTreeData ({commit, state}) {
API.classes.getAllData().then(({data}) => {
commit('getClassTreeData', data.data)
})
},
}
const mutations = {
getClassTreeData (state, data) {
state.classTreeData = data
},
}
export default {
namespaced: true,
state,
actions,
mutations
}
- 模块化输出
import Vue from ‘vue’
import Vuex from ‘vuex’
import common from ‘./modules/common’
import user from ‘./modules/user’
import metamgr from ‘./modules/metamgr’
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
common,
user,
metamgr
},
strict: process.env.NODE_ENV !== ‘production’
})
1
获取
实战
user.js
import {getToken,setToken,getUser,setUser,removeToken} from '@/utils/auth'
import {login,getUserInfo,logout} from '@/api/login'
const user ={
state:{
token:getToken(),
user:getUser()
},
actions:{
Login({commit},form){
return new Promise((resolve,reject)=>{
login(form.username.trim(),form.password.trim()).then(response=>{
const resp = response.data
commit('SET_TOKEN',resp.data.token)
resolve(resp)
}).catch(error =>{
reject(error)
})
})
},
GetUserInfo({commit,state}){
return new Promise((resolve,reject)=>{
getUserInfo(state.token).then((resp)=>{
const respUser = resp.data
commit('SET_USER',respUser.data)
resolve(respUser)
}).catch((error)=>{
reject(error)
})
})
}
},
mutations:{
SET_TOKEN(state,token){
state.token = token
setToken(token)
},
SET_USER(state,user){
state.user = user
setUser(user)
}
},
}
export default user
permision.js
/**
* 权限校验：
* Vue Router中的 前置钩子函数 beforeEach(to, from, next)
* 当进行路由跳转之前，进行判断 是否已经登录 过，登录过则允许访问非登录页面，否则 回到登录页
*
* to: 即将要进入的目标路由对象
* from: 即将要离开的路由对象
* next: 是一个方法，可以指定路由地址，进行路由跳转
*/
import router from './router'
import {getUserInfo} from './api/login'
import store from './store'
router.beforeEach((to,from,next)=>{
/*获取token */
let token = store.state.user.token
if(!token){ //没有获取到token
if(to.path!='/login'){
next({path:'/login'})
}else{
next();
}
}else{
if(to.path=='/login'){
next();
}else{
var user = store.state.user.user
if(JSON.stringify(user)!=undefined){
next();
}else{
store.dispatch('GetUserInfo').then(resp =>{
if(resp.flag){
next();
}else{
next({path:'/login'})
}
}).catch(error=>{
})
}
}
}
})
这篇关于Vuex dispatch用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
