Vuex dispatch用法

本文主要是介绍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=>{