精华内容
下载资源
问答
  • Vuex dispatch用法

    千次阅读 2021-03-06 14:24:52
    Vuex的作用: 针对全局数据 多个组件都要使用某个变量; 但是父子组件之间传递又很麻烦 使用vuex 可以进行状态管理,可以保证数据最新 数据是存储在浏览器维护的内存中 当页面刷新f5的时候,所保存的数据被销毁 ...

    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 和 commit

    2019-09-24 02:20:40
    Vuex2.0的action用dispatch触发,mutation用commit 转载于:https://www.cnblogs.com/Alex-ZJ/p/9964614.html

    Vuex2.0的action用dispatch触发,mutation用commit

    转载于:https://www.cnblogs.com/Alex-ZJ/p/9964614.html

    展开全文
  • vuexdispatch源码解读

    2019-09-22 22:20:04
    vuex 源码的网址:...在介绍dispatch之前,先介绍一个函数:subscribeAction。 首先通过官方文档https://vuex.vuejs.org/zh/api/#subscribeaction来看一下这个api的作用: 订阅 store 的 action。handler会...

    vuex 源码的网址:https://github.com/vuejs/vuex/blob/dev/src/store.js

    在介绍dispatch之前,先介绍一个函数:subscribeAction。

    首先通过官方文档https://vuex.vuejs.org/zh/api/#subscribeaction来看一下这个api的作用:

    订阅 store 的 action。handler 会在每个 action 分发的时候调用并接收 action 描述和当前的 store 的 state 这两个参数:

    store.subscribeAction((action, state) => {
      console.log(action.type)
      console.log(action.payload)
    })

     这样设置之后,每次分发一个action,都会自动执行这个函数。

    从 3.1.0 起,subscribeAction 也可以指定订阅处理函数的被调用时机应该在一个 action 分发之前还是之后 (默认行为是之前):

    store.subscribeAction({
      before: (action, state) => {
        console.log(`before action ${action.type}`)
      },
      after: (action, state) => {
        console.log(`after action ${action.type}`)
      }
    })

     现在先看看这个API的源码:

    subscribeAction (fn) {
        const subs = typeof fn === 'function' ? { before: fn } : fn
        return genericSubscribe(subs, this._actionSubscribers)
      }
    
    function genericSubscribe (fn, subs) {
      if (subs.indexOf(fn) < 0) {
        subs.push(fn)
      }
      return () => {
        const i = subs.indexOf(fn)
        if (i > -1) {
          subs.splice(i, 1)
        }
      }
    }

     代码很简单,总的来说,就是将我们配置的对象/函数放到_actionSubscribers数组中。

    然后再来看看dispatch这个方法:

    dispatch (_type, _payload) {
        // check object-style dispatch
        const {
          type,
          payload
        } = unifyObjectStyle(_type, _payload)
    
        const action = { type, payload }
        const entry = this._actions[type]
        if (!entry) {
          if (process.env.NODE_ENV !== 'production') {
            console.error(`[vuex] unknown action type: ${type}`)
          }
          return
        }
    
        try {
          this._actionSubscribers
            .filter(sub => sub.before)
            .forEach(sub => sub.before(action, this.state))
        } catch (e) {
          if (process.env.NODE_ENV !== 'production') {
            console.warn(`[vuex] error in before action subscribers: `)
            console.error(e)
          }
        }
    
        const result = entry.length > 1
          ? Promise.all(entry.map(handler => handler(payload)))
          : entry[0](payload)
    
        return result.then(res => {
          try {
            this._actionSubscribers
              .filter(sub => sub.after)
              .forEach(sub => sub.after(action, this.state))
          } catch (e) {
            if (process.env.NODE_ENV !== 'production') {
              console.warn(`[vuex] error in after action subscribers: `)
              console.error(e)
            }
          }
          return res
        })
      }

         总体上来说,就是先把_actionSubscribers数组中的before的函数都执行完之后,在分发action对应的类型。执行完毕之后在执行_actionSubscribers数组after配置的方法。值得注意的是,分发action的时候采用了Promise。所以比较适合在action里面执行异步函数。

          

    展开全文
  • 主要介绍了Vue+Electron下VuexDispatch没有效果的解决方案 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值) commit:同步操作,写法: this.$store.commit('mutations方法名',值) main.js import Vuex from 'vuex' Vue.use...

    dispatch:含有异步操作,例如向后台提交数据,写法:

     this.$store.dispatch('action方法名',)
    

    commit:同步操作,写法:

    this.$store.commit('mutations方法名',)
    

    main.js

    import Vuex from 'vuex'
    
    Vue.use(vuex);
    
    const store = new Vuex.store({
    
      state: {
    
        nickName: "",
    
        cartCount: 0  
    
      },
    
      mutations: {
    
        updateUserInfo(state,nickName) {
    
          state.nickName = nickName;
    
        },
    
        updateCartCount(state,cartCount) {
    
          state.cartCount += cartCount;
    
        }
    
      },
    
        actions: {
            updateUserInfo(context) {
                context.commit("updateUserInfo");
            },
            updateCartCount(context) {
                context.commit("updateCartCount");
            }
        }
    })
    
    new Vue({
    
      el: "#app",
    
      store,
    
      router,
    
      template: '<App/>',
    
      components: {App}
    
    })
    

    组件中:

    methods: {
                increment(){
                    this.$store.dispatch("updateUserInfo", 'nick');  //this.$store.commit("increment", 'nick');
                },
                decrement() {
                    this.$store.dispatch("updateCartCount", 1);  // this.$store.commit("decrement", 1);
                }
            }
    
    展开全文
  • vuex中,如果不想引入mapMutations或者mapMutations,可以分别用commit 与dispatch 代替 commit 同步操作 this.$store.commit('mutations的方法',paramas) dispatch 异步操作 this.$store.dispatch('actions的...
  • 今天小编就为大家分享一篇在Vuex使用dispatch和commit来调用mutations的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vuex里面的this.$store.dispatch方法

    万次阅读 多人点赞 2019-07-09 16:03:52
    main.js store/index.js 在store/modules文件夹里的user.js,声明user并释放出来。 ...this.$store.dispatch(‘Login’, this.loginForm)来调取store里的user.js的login方法,从而要更新。
  • Electron-vue中vuex dispatch没反应 最近在用Electron-vue写一个客户端时,发现vuexdispatch触发没反应,console也没报错,这就很蛋疼。 翻了翻官方文档,解决方法如下(原因就不多说了,管用就行!) 在/src/main...
  • 2.hooks文件夹下新增dispatch.ts文件,并写入以下代码,这里不做解析,详细操作上一篇文章,地址在第一步 import module from '@vuex/modules'; type GetModule<Modules> = Modules extends { actions: ...
  • vuex知识解析

    2020-12-18 16:58:49
    文章目录VUEX知识解析Vuex是什么?... dispatch VUEX知识解析 Vuex是什么? vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。通俗地可以理解为是定义了一个全局对象,所有页面都可以访问。当你在state中
  • vuexdispatch 和 commit 的用法和区别

    万次阅读 多人点赞 2018-07-05 13:24:51
    dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值) commit:同步操作,写法:this.$store.commit('mutations方法名',值)
  • vuexdispatch 和 commit 的区别 vue

    万次阅读 2018-09-19 14:52:02
    import Vuex from 'vuex' Vue.use(vuex); const store = new Vuex.store({  state: {  nickName: "",  cartCount: 0   },  mutations: {  updateUserInfo(state,nickName) {  state....
  • 在使用vue components dispatch Vuex actions的时候需要传递参数给多个参数actions 但是在actions 只是可以接收到两个参数的问题 分析 vuex actions 固定接受的第一个参数是dispatch对象 第二个参数是使用者本身定制...
  • 主要介绍了vuex中store存储store.commit和store.dispatch的用法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了详解vuex中action何时完成以及如何正确调用dispatch的思考,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vuex actions传递多参数的处理

    万次阅读 2018-05-30 20:28:36
    在使用vue components dispatch Vuex actions的时候需要传递参数给多个参数actions 但是在actions 只是可以接收到两个参数的问题 分析 . vuex actions 固定接受的第一个参数是dispatch对象 第二个参数是使用者...
  • vuex中的dispatch和commit

    2018-08-13 15:04:00
    dispatch:含有异步操作,eg:向后台提交数据,写法: this.$store.dispatch('mutations方法名',值) commit:同步操作,写法:this.$store.commit('mutations方法名',值) 转载于:...
  • vuex中commit和dispatch的区别

    千次阅读 2020-04-18 16:55:29
    commit 和dispatch的区别在于commit是提交mutatious的同步操作,dispatch是分发actions的异步操作 dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch(‘action方法名’,值) commit:同步...
  • 1.dispatch:异步操作,触发actions方法。 写法: this.$store.dispatch(‘actions方法名’,所传值); 2.commit:同步操作,触发mutations方法。 写法:this.$store.commit(‘mutations方法...文档:Vuex官方文档 ...
  • this.$store.commit('toShowLoginDialog', true);...dispatch:含有异步操作,例如向后台提交数据,写法: this.store.dispatch(′mutations方法名′,值)commit:同步操作,写法:this.store.disp...
  • this.$store.dispatch("log/getLog",{params}).then((params) => { let data=this.$store.getters["log/getLog"] }) 2、接收参数 getLog({ commit },params){ return new Promise((resolve, reject) =&...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,585
精华内容 5,834
关键字:

dispatchvuex

vue 订阅