精华内容
下载资源
问答
  • Store 存储之 dispatch && commit 一、存在即合理 1. Store   当我们在使用 vue 时,同一个数据可能需要被多处复用,你可以选择创建一个公共 data ,数据有了,但是,调试将会变为噩梦。任何时间,...


    一、存在即合理



    1. Store

      当我们在使用 vue 时,同一个数据可能需要被多处复用,于是你选择创建了一个公共 data ,数据解决了,但是,调试将会变为噩梦,任何时间,我们应用中的任何部分,在任何数据改变后,都不会留下变更过的记录。为了解决这种问题,Store 由此诞生,我们将这个公共 data 放进 Store 中同一管理,当出现错误时,Store 告诉你哪里出错了。

    // 在 vue 项目文件中的 main.js 
    // Tip:建议在store文件中写store代码,main文件创建vue实例,本文为了方便,写到一块
    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");
    	   }
     }
    })
    // 新建 Vue 实例
    new Vue({
      el: "#app",
      store,
      router,
      template: '<App/>',
      components: {App}
    })
    
    • Tip:

      Store 中 state 存放公共 data ,而 state 的变更,通过 Store 自身的 action 管理。这种集中式状态管理能够被更容易地理解哪种类型的变更将会发生,以及它们是如何被触发。当错误出现时,会生成 log 记录 bug 之前发生了什么。

    2. Action 两种状态管理方式 dispatch && commit

    dispatch 异步管理用于异步提交、修改数据,例如:我们的图片、视频等资源较大的数据,加载时无法快速渲染完成,此时就需要用异步等待一点一点加载,同时还能进行一些别的“骚操作”,何乐而不为;

    commit 同步管理:同步加载,事要一件件做,不急也不慌。**



    二、dispatch


    1. dispatch 使用

    // 在我们自定义的组件中使用(结合上文的 Store 实例)
    methods: {
      increment(){
        this.$store.dispatch("updateUserInfo", 'nick'); 
      },
      decrement() {
        this.$store.dispatch("updateCartCount", 1); 
      }
     }
    


    三、commit


    1. commit 操作

    // 在我们自定义的组件中使用(结合上文的 Store 实例)
    methods: {
      increment(){
        this.$store.commit("increment", 'nick'); 
      },
      decrement() {
      	this.$store.commit("decrement", 1);
      }
     }
    
    展开全文
  • Vue.prototype.$dispatch = function (eventName, value) { let parent = this.$parent while (parent) { parent.$emit(eventName, value) parent = parent.$parent } } 从下向上通知: 把孙子级组件里面的...

    [src/main.js]

    4.1 向上通知 $dispatch
    // 向上通知
    Vue.prototype.$dispatch = function (eventName, value) {
      let parent = this.$parent
      while (parent) {
        parent.$emit(eventName, value)
        parent = parent.$parent
      }
    }
    
    

    从下向上通知: 把孙子级组件里面的数据传送到爷爷级组件里面的方式

    1. 在子级组件里面传出需要传的数据
    <template>
      <div class="grandson">
        <h5>子级</h5>
        <button @click="grandsonHello">sayHello</button>
      </div>
    </template>
    
    <script>
        export default {
            name: 'Grandson', // 组件名称
            methods: {
                // 向爷爷问好
                grandsonHello () {
                    this.$dispatch('hello', '爷爷好')
                }
            }
        }
    </script>
    
    
    1. 在父级里面接收数据
    <template>
      <div class="father">
        <h3>父级</h3>
        <Grandson></Grandson>
      </div>
    </template>
    
    <script>
        import grandson from '@/views/Test/Grandson'
        
        export default {
            name: 'Father', // 组件名称
            components: {
                grandson
            }
            // 必须写在 created 里面
            created () { // 结束加载动画, 发起异步请求
                this.$on('hello', (data) => {
                    console.log(data)
                })
            }
        }
    </script>
    
    1. 在爷爷级里面把数据打印出来
    <template>
      <div class="grandpa">
      	<h1>爷爷</h1>
        <Father></Father>
      </div>
    </template>
    
    <script>
        import father from '@/views/Test/Father'
    
        export default {
            name: 'Grandpa', // 组件名称
            components: {
                father
            }
        }
    </script>
    
    4.2 向下通知 $broadcast
    Vue.prototype.$broadcast = function (eventName, value) {
        const broadcast = (children) => {
            children.forEach((child) => {
                child.$emit(eventName, value)
                if (child.$children) {
                    broadcast(child.$children)
                }
            })
        }
        broadcast(this.$children)
    }
    
    

    从上向下通知: 把爷爷级组件里面的数据传送到孙子级组件里面的方式

    1. 在爷爷级组件里面传出需要传的数据
    <template>
      <div class="grandpa">
      	<h1>爷爷</h1>
        <Father></Father>
      </div>
    </template>
    
    <script>
        import father from '@/views/Test/Father'
    
        export default {
            name: 'Grandpa', // 组件名称
            components: {
                father
            }
            methods: {
            // 向孙子问好
            helloSon () {
                this.$broadcast('helloSon', 'Son hello ~~~')
            }
        },
        }
    </script>
    
    1. 在子级里面回调
    <template>
      <div class="grandson">
        <h5>子级</h5>
        <button @click="grandsonHello">sayHello</button>
      </div>
    </template>
    
    <script>
        export default {
            name: 'Grandson', // 组件名称
            methods: {
                // 向爷爷问好
                grandsonHello () {
                    this.$dispatch('hello', '爷爷好')
                }
            },
            created () { // 结束加载动画, 发起异步请求
                this.$on('helloSon', (data) => {
                    console.log(data)
                })
            },
        }
    </script>
    
    
    4.3 eventBus

    如果不想通知除了爷爷以外的组件(就是中间的类似父级组件), 那么可以用以下方法

    1. 在main里面, 写方法

    [src/main.js]

    /*
    * 功能: 消息总线
    * 作者: Zero
    * */
    Vue.prototype.$eventBus = new Vue()
    
    1. 在孙子组件里面传数据
    <template>
      <div class="grandson">
        <h5>子级</h5>
        <button @click="grandsonHello">sayHello</button>
      </div>
    </template>
    
    <script>
        export default {
            name: 'Grandson', // 组件名称
            methods: {
                // 向爷爷问好
                grandsonHello () {
                    this.$eventBus.$emit('hello', '爷爷好')
                }
            },
            created () { // 结束加载动画, 发起异步请求
                this.$on('helloSon', (data) => {
                    console.log(data)
                })
            },
        }
    </script>
    
    
    1. 在爷爷组件里面接取
    <template>
      <div class="grandpa">
      	<h1>爷爷</h1>
        <Father></Father>
      </div>
    </template>
    
    <script>
        import father from '@/views/Test/Father'
    
        export default {
            name: 'Grandpa', // 组件名称
            components: {
                father
            }
            methods: {
                // 向孙子问好
                helloSon () {
                    this.$broadcast('helloSon', 'Son hello ~~~')
                }
    	    },
            created () { // 结束加载动画, 发起异步请求
                this.$eventBus.$on('hello', (data) => {
                    console.log('grandpa', data)
                })
            },
        }
    </script>
    
    展开全文
  • Vuex dispatch用法

    千次阅读 2021-03-06 14:24:52
    Vuex的作用: 针对全局数据 多个组件都要使用某个变量; 但是父子组件之间传递又很麻烦 ...import Vue from 'vue' import Vuex from 'vuex' import common from './modules/common' import user from './modules/u

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

                    })
                }
            }
        }

    })


     

    展开全文
  • dispatch: 含有异步操作 存储: this.$store.dispatch('initUserInfo',friend); 取值: this.$store.getters.userInfo; commit:同步操作 存储: this.$store.commit('initUserInfo',friend); 取值: this.$store....

    dispatch: 含有异步操作

    例如向后台提交数据,this.$store.dispatch('action方法名',值)

    存储:

    this.$store.dispatch('initUserInfo',friend);
    

    取值:

    this.$store.getters.userInfo;
    
    commit:同步操作

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

    存储:

    this.$store.commit('initUserInfo',friend);
    

    取值:

    this.$store.state.userInfo;
    
    展开全文
  • Vue 中 store 使用方法讲解

    千次阅读 2021-04-25 17:39:53
    vuex 包含有五个基本的对象: ...就和vue的computed差不多; mutations:提交状态修改。也就是set、get中的set,这是vuex中唯一修改state的方式,但不支持异步操作。第一个参数默认是state。外部调用方式:store.co
  • Vue.prototype.$dispatch=function (eventName,componentName,value){ let parent=this.$parent; while(parent){ if(parent.$options.name===componentName){ parent.$emit(eventName,value); return } .
  • Vue之数据传递的方法

    千次阅读 2020-12-22 12:31:26
    若组件想要改变State中的数据,必须先通过Dispatch方法调用Actions(有时可以忽略调用Actions,直接调用Mutations),执行一些异步或同步操作 Mutations:组件若要改变数据,先去调用Actions,通过Actions再根据...
  • 在日常运维开发工作中,我们经常会去调用第三方服务接口获取数据,...按照以往的思路,通常是先定义一个获取群组信息的方法(当然,我们需要先做接口的认证,获取鉴权token)。 """ zabbix_demo.py """ import requests
  • Vue.use(vuex); const store = new Vuex.store({  state: {  nickName: "",  cartCount: 0   },  mutations: {  updateUserInfoMutations(state,nickName) {  state.nickName = nickName;  },  ...
  • VUE store 开发(二)

    2021-02-03 14:14:44
    一个组件执行时,通过调用store.dispatch触发actions action可以提交(commit)一个mutations,action中可以有任何的异步操作 在mutations中,可以改变state state的变化,触发组件(当前组件或者其他组件)值的...
  • vuex里面的this.$store.dispatch方法

    万次阅读 2020-04-24 22:22:29
    this.loading = false // this.$router.push({ path: this.redirect || '/' }) }).catch(() => { this.loading = false }) } this.$store.dispatch(‘Login’, this.loginForm)来调取store里的user.js的login方法,...
  • 最终反复排查,是由于Vue子页面中的Methods中有个方法和一个全局方法重名了,改下名字就好了。 问题再现, 子组件button-upload.vue,代码如下: <template> <div class="fl"> <el-dropdown @co...
  • vue项目分析--20211012vuex中 this.\$store.dispatch() 与 this.$store.commit()方法的区别vuex vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别 这两个的区别是存取的方式不同,两个都是传值给...
  • 这里将版本修改成1.8就可以了
  • Vue2.0 传值方法

    2021-10-29 16:07:16
    Vue2.0 传值方法Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给...
  • 正好做到角色管理这部分。对角色列表增删改之后,都应该让当前列表刷新一下。...若在删除方法中同时执行了this.$store.dispatch("addRoles");和this.getRoles(); 那么不论写法的先后,都是状态中的方法先..
  • vue计算方法 computed

    2021-09-08 10:18:20
    当用到计算属性时,,方法默认返回的时get方法 例: computed: { fixedHeader: { return this.$store.state.settings.fixedHeader } } 这里默认返回get方法,实际计算属性 如下: computed: { fixedHeader: {...
  • vue项目 登录方法记录

    2021-04-24 19:07:19
    vue项目 登录方法记录 handleLogin() { this.$refs.loginForm.validate((valid) => { if (valid) { this.loading = true; if (this.loginForm.rememberMe) { Cookies.set("username", this.loginForm....
  • 虽然在 add 方法中返回的是100 ,其实又封装了,返回的是一个Promise! 当然我们也可以自己返回Promise 根据不同的需求!
  • <!... <...Vue 测试实例-数组更新 </title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> {{sites}} <button @
  • 1、问题 2、解决方案 2.1、一般方式:不做任何处理连续请求多个协议 2.2、GCD队列组:dispatch_group_t 2.3、GCD信号量:dispatch_semaphore_t 2.4、GCD信号量实现GCD队列组功能(不推荐)
  • Vue.js页面渲染出现{{message}}问题处理方法 业务场景:最近在做JSP项目,然后又引入vue.js做前端,然后启动页面时候出现{{message}}占位符显示出来,然后再加载页面,有点闪屏问题,体验不是很好,这种情况有可能是...
  • this.$store.dispatch('stestvalue', true); 规范的使用方式: // 以载荷形式 store.commit('increment',{ amount: 10 //这是额外的参数 }) // 或者使用对象风格的提交方式 store.commit({ type: 'increment', ...
  • vue传值方式总结 (十二种方法

    千次阅读 多人点赞 2021-04-23 20:21:55
    一.父传子传递 (1)在父组件的子组件标签上绑定一个属性,挂载要传输的变量 ​ (2)在子组件中通过props来接受数据,props可以是数组也可以是对象,接受的数据...(2)在子组件的方法中通过 this.$emit(“事件”)来
  • VUE使用axios调用后台API接口的方法引言Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,...
  • 建议先读文档再读次文vuex文档 computed: { ​ ...mapState(['count']), ​ ...mapState(['showNum']), }, methods: { ...​ ...mapMutations(['count']), ...commit的作用,就是...dispatch的作用,专门用来触发acti
  • ,当子组件点击保存的时候,子组件向父组件传值 this.userAvatar = url //获取用户头像 if (this.userInfo.avatar) { this.$store.dispatch('GetAvatar', this.userInfo.avatar) } } .ant-upload-preview { position...
  • Vue-actions 跨域

    2021-01-16 21:49:32
    和mutations不同的是 actions发送的是dispatch请求,dispatch是用来处理异步任务的,commit是处理同步的 store.js import axios from 'axios' export default{ state:{ a:50 }, mutations:{ add(state,{a}){ state.a...
  • 所谓的Vuex其实是一个为Vue.js设计的数据仓库,把各个组件公用的数据放到一个仓库里面进行统一的管理 Vuex优点: 既使非父子组件间的数据共享也能变得简单明了 让程序变得更加可维护(将数据抽离了出来) 只要...
  • 在项目中,会遇到列表页到详情页,然后回到列表页还停留在当前位置,退出列表页后取消页面缓存的需求,所以就用到了keepAlive动态缓存方法 第一步: 在路由里配置开启缓存: { path: '/p/:id/:pinyin', name: '...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,523
精华内容 8,209
关键字:

vue的dispatch方法

vue 订阅