zoukankan      html  css  js  c++  java
  • 在Vuex使用 以及 dispatch和commit来调用mutations的区别

    1. 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}
    
    })

    2. 组件中:

    methods: {
                increment(){
                    this.$store.dispatch("updateUserInfo", 'nick');  //this.$store.commit("increment", 'nick');
                },
                decrement() {
                    this.$store.dispatch("updateCartCount", 1);  // this.$store.commit("decrement", 1);
                }
            }

    3.区别:

    dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('mutations方法名',值)
    
    commit:同步操作,写法:this.$store.commit('mutations方法名',值)
  • 相关阅读:
    LeetCode 43 字符串相乘
    HDU 1031 Design T-Shirt
    HDU 1728 逃离迷宫
    HDU 1285 确定比赛名次
    HDU 1116 Plays on words
    HDU 1195 Open the lock
    HDU 1072 Nightmare
    HDU 1272 小希的迷宫
    HDU 1273 漫步森林
    HDU 1269 迷宫城堡
  • 原文地址:https://www.cnblogs.com/amujoe/p/9039203.html
Copyright © 2011-2022 走看看