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用法相关推荐

Vuex的用法及组成部分
Vuex的用法及组成部分 1.Vuex是什么? 借鉴了Flux.Redux. The Elm Architecture Vuex是专为vue.js设计的状态管理模式. 集中式存储和管理应用程序中所有 ...
vuex的计算属性_vue中vuex的五个属性和基本用法
VueX 是一个专门为 Vue.js 应用设计的状态管理构架,统一管理和维护各个vue组件的可变化状态(你可以理解成 vue 组件里的某些 data ). Vuex有五个核心概念: state, ge ...
Vue中Vuex的五个属性和基本用法
一.Vuex的五个核心概念:state.getters.mutations.actions.modules 1.state: vuex的基本数据,用来存储变量: 2.getters: 从基本数据(st ...
vuex保存用户信息_Vuex状态管理
一个组件可以分为数据和视图,数据更新时,视图也会自动更新.在视图中又可以绑定一些事件,它们触发methods里面指定的方法,从而又可以改变数据.更新视图,这就是一个组件基本的运行模式. 但实际的业务中 ...
typescript 判断异步执行已经结束_vue进阶系列——用typescript玩转vue和vuex
用过vue的朋友大概对vuex也不陌生,vuex的官方解释是专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. ...
vuex原理解析并实现一个简单的vuex
vuex的作用官方 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 个人理解简 ...
vue3 中 vuex 两种方法使用使用用用用用用用用
今天来写一下这个vue3中vuex的用法 1.安装 npm install vuex -S 2.引入这个时候就有两种选择了第一种直接引入store文件 import $store from ...
【vue2.0进阶】案例：用Vuex实现一个简单的计算器
昨天我们学习了Veux的几个重要的核心概念.当然只讲概念还不够,必须要结合上案例才能理解得更深刻. 马上就开始我们今天的案例:用Vuex实现一个简单的网页计算器. 我们之前的章节说过,Vuex适合在较 ...
vuex使用方法（详细实用）
vuex使用方法前言 1.官方文档比较正式详细,但看完之后依然一脸懵逼,不知道具体该怎么使用. 2.本文内容是结合自己在项目开发中总结的比较好用的一种用法. 3.写这篇文章主要目的是为了自己找资料时 ...
【vue2.0进阶】轻松理解Vuex的3个核心概念及简单应用案例(计算器)
Vuex是一个提供状态管理机制,相比使用传统的全局对象,它有两大优点,一个是它的状态存储是响应式的,另一个是要不能随意修改Vuex的状态,必须按照它的规矩来办事.最后也了解了它有适用和不适用的业务场景 ...

Vuex dispatch用法

Vuex dispatch用法相关推荐

最新文章

热门文章