Vuex中this.$store.commit()和this.$store.dispatch()区别说明

目录
  • this.$store.commit()和this.$store.dispatch()的区别
    • commit: 同步操作
    • dispatch: 异步操作
    • 其他了解
  • Vuex应用实例this.$store.commit()触发
    • 新建文件夹store,store下
    • 头部公共组件components文件夹下

this.$store.commit()和this.$store.dispatch()的区别

两个方法其实很相似,关键在于一个是同步,一个是异步

commit: 同步操作

this.$store.commit('方法名',值) //存储
this.$store.state.'方法名' //取值

dispatch: 异步操作

this.$store.dispatch('方法名',值) //存储
this.$store.getters.'方法名' //取值

当操作行为中含有异步操作,比如向后台发送请求获取数据,就需要使用action的dispatch去完成了,其他使用commit即可.

其他了解

  • commit => mutations, 用来触发同步操作的方法.
  • dispatch => actions, 用来触发异步操作的方法.

在store中注册了mutation和action

在组件中用dispatch调用action,用commit调用mutation

Vuex应用实例this.$store.commit()触发

新建文件夹store,store下

action.js

const actions = {}
export default actions;

getter.js

const getters = {}
export default getters;

mutation-types.js

export const publicSetEvent = 'publicSetEvent';

mutations.js

import {publicSetEvent} from './mutation-types';
const mutations = {
    [publicSetEvent]: (state, json) => {
    // 初始化默认,避免跳转路由时的公用部分显示的相互影响
       state.publicSet = {headTitle: true,headNav: false,sTitle: '头部标题'}
// 是否显示头部title
        state.publicSet.headTitle = json.headTitle || state.publicSet.headTitle;
        // 是否显示头部tabbar切换
        state.publicSet.headNav = json.headNav || state.publicSet.headNav;
        // 头部显示的标题文字
        state.publicSet.sTitle = json.sTitle || state.publicSet.sTitle;
        // tabbar的标题文字及待办badge数字
        state.publicSet.navList = json.navList || state.publicSet.navList;
    }
}
export default mutations;

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations';
import getters from './getters';
import actions from './actions';
Vue.use(Vuex);
const state = {
    publicSet: {//设置公共头
        headTitle: true,
        headNav: false,
        sTitle: '头部标题'
    }
}
const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
});
export default store;

头部公共组件components文件夹下

v-header.vue

<template>
  <div class="v-header">
    <vTitle v-if="publicSet.headTitle" :stitle="publicSet.sTitle"></vTitle>
  </div>
</template>
<script>
import vTitle from './v-title';
import {mapState} from 'vuex';
export default{
   name:'v-header',
   components:{vTitle},
   data(){
    return{
      
    }
   },
   computed: {
       ...mapState(['publicSet'])
   }
}
</script>

v-title.vue

<template>
  <div class="v-title">
      <XHeader :left-options="{backText:''}" :title="stitle"></XHeader>
  </div>
</template>
<script>
import { XHeader } from 'vux'
export default{
  name:'v-title',
  props:['stitle'],
  components:{XHeader},
  data (){
      return {
      }
  },
  methods: {
  }
}
</script>
<style lang="less">
</style>

App.vue

<template>
  <div id="app">
    <vHeader></vHeader>
    <router-view/>
  </div>
</template>
<script>
import vHeader from '@/components/header/v-header'
export default {
  name: 'app',
  components:{vHeader}
}
</script>

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store'
Vue.use(Vuex)
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

页面调用index.vue

<template>
    <div class="index">
    </div>
</template>
<script>
export default{
    name:'index',
    data(){
        return{
        }
    },
    created(){
    },
    beforeRouteEnter(to,from,next){
        let option={
          headTitle:true,
      sTitle:'我是新标题'
        }
        console.log(option);
        next(vm=>{
          vm.$store.commit('publicSetEvent',option);
        })
    },
    methods:{
    }    
}
</script>
<style lang="less">
</style>

运行进去index页面就可以看到公共头了

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 对vuex中store和$store的区别说明

    这里写自定义目录标题 <router-link to="/login">{{ $store.state.userName }}</router-link> <router-link to="/login">{{ store.state.userName }}</router-link> <router-link to="/login">{{ this.store.state.userNa

  • vuex 解决报错this.$store.commit is not a function的方法

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要多个组件循环使用.这时候再使用上面的方法会让项目代码变得冗长,并且不利于组件的复用,提高了耦合度. Vue 的状态管理工具 Vuex 完美的解决了这个问题. 看了下vuex的官网,觉得不是很好理解,有的时候我们只是需要动态的从一个组件中获取数据(官网称为"组件层级":是个独立的控件,作用范围

  • 浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

    1.在Vue项目中引用公共方法 作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量.怎么做比较好呢,话不多说直接看代码把 首先 要在main.js中引入公共js.然后,将方法赋在Vue的原型链上. 像图中这样. 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.login(); } /**然后公共方法里写一段简单的代码*/ export defaul

  • 在Vuex使用dispatch和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

  • Vuex中this.$store.commit()和this.$store.dispatch()区别说明

    目录 this.$store.commit()和this.$store.dispatch()的区别 commit: 同步操作 dispatch: 异步操作 其他了解 Vuex应用实例this.$store.commit()触发 新建文件夹store,store下 头部公共组件components文件夹下 this.$store.commit()和this.$store.dispatch()的区别 两个方法其实很相似,关键在于一个是同步,一个是异步 commit: 同步操作 this.$store

  • vuex中this.$store.commit和this.$store.dispatch的基本用法实例

    目录 前言 区别 实战 总结 前言 this. s t o r e . d i s p a t c h ( ) 与 t h i s . store.dispatch() 与 this. store.dispatch()与this.store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state 区别 this.$store.commit() 同步操作 this.$store.commit('方法名',值)[存储] this.$sto

  • Vuex中mutations和actions的区别及说明

    目录 mutation Mutation 必须是同步函数 Action 在实际开发的store文件中 总结 mutation 我们知道,在使用vuex对项目状态进行管理时,只能使用commit来提交mutation对store中的状态进行更改 Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数: const

  • vuex中store存储store.commit和store.dispatch的用法

    代码示例: this.$store.commit('loginStatus', 1); this.$store.dispatch('isLogin', true); 规范的使用方式: // 以载荷形式 store.commit('increment',{ amount: 10 //这是额外的参数 }) // 或者使用对象风格的提交方式 store.commit({ type: 'increment', amount: 10 //这是额外的参数 }) 主要区别: dispatch:含有异步操作,数

  • vuex中store存储store.commit和store.dispatch的区别及说明

    目录 store存储store.commit和store.dispatch区别 主要区别 vuex store原理及使用指南 使用 安装 示例需求场景 源码目录结构 store组件初始化 store存储store.commit和store.dispatch区别 代码示例: this.$store.commit('loginStatus', 1); this.$store.dispatch('isLogin', true); 规范的使用方式: // 以载荷形式 store.commit('incr

  • vuex中store.commit和store.dispatch的区别及使用方法

    目录 store.commit和store.dispatch的区别及使用 规范的使用方式 主要区别 this.$store.dispatch() 与 this.$store.commit() 总结 store.commit和store.dispatch的区别及使用 代码示例: this.$store.commit('loginStatus', 1); this.$store.dispatch('isLogin', true); 规范的使用方式 // 以载荷形式 store.commit('inc

  • vue.js的状态管理vuex中store的使用详解

    一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为

随机推荐