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=>{

                })
            }
        }
    }

})

 

这篇关于Vuex dispatch用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---