zoukankan      html  css  js  c++  java
  • vuex中 mutation和action的区别和使用

    utations 类似于事件,用于提交 Vuex 中的状态 state

    action 和 mutations 也很类似,主要的区别在于mutations 只能是同步操作,,action 可以包含异步操作,而且可以通过 action 来提交 mutations

    mutations 有一个固有参数 state,接收的是 Vuex 中的 state 对象

    action 也有一个固有参数 context,但是 context 是 state 的父级,包含 state、getters

    Vuex 的仓库是 store.js,将 axios 引入,并在 action 添加新的方法

    分发调用action:

    this.$store.dispatch('action中的函数名',发送到action中的数据)

    在组件中提交 Mutation:
    this.$store.commit(“mutation函数名”,发送到mutation中的数据)

    在action中提交mutation :

    const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: {
        increment (context) {    //官方给出的指定对象, 此处context可以理解为store对象
          context.commit('increment');
        }
      }
    })
    
    // 第一种写法简写形式
      const actions = {
        action的函数名({commit}) { 
          commit(“mutation函数名”, value);   //调用mutation中的函数
          //此处value可以是对象,可以是固定值等
        }
      }
      // 第二种形式
      const actions = {
        action中的函数名(context) {
          //context 官方给出的指定对象, 此处context可以理解为store对象
          context.commit(“mutation函数名”, value);     //调用mutation中的函数
        }
      }
    
    
  • 相关阅读:
    JAVA 设计模式 组合模式
    JAVA 设计模式 模板方法模式
    SpringBoot 数据篇之使用JDBC
    [Spring]01_环境配置
    [spring]03_装配Bean
    [Spring]04_最小化Spring XML配置
    [Quartz笔记]玩转定时调度
    [Spring]支持注解的Spring调度器
    asp.net core 系列 13 日志
    asp.net core 系列 12 选项 TOptions
  • 原文地址:https://www.cnblogs.com/panghu123/p/11747285.html
Copyright © 2011-2022 走看看