索鸟网

  1. 首页
  2. 【vuex入门系列02】mutation接收单个参数和多个参数

【vuex入门系列02】mutation接收单个参数和多个参数



以下操作全部放在了这个项目当中

https://github.com/itguide/vu...

mutation接收单个参数和多个参数

利用$store.commit 里面 写参数相当于 mutation的函数名字

    在组件里面:
    第一种方式: this.$store.commit("addIncrement",{name:"stark",age:18,n:5})
    第二种方式:
    this.$store.commit({
        type:"addIncrement",
        n:5,
        age:18,
        name:"stark.wang"
    })

在vuex里面接收:接收第二个参数相当于前面传过来的参数,如果多个这个就是对象,如果是一个参数,这个第二个参数payload就是前面的参数。

  mutations: {
        // 任何时候改变state的状态都通过提交 mutation 来改变
        // 里面可以定义多个函数,当触发这个函数就会改变state状态
        addIncrement(state, stark) {
            console.log(stark);
            // 接收一个state作为参数, 相当于上面的state
            // state.num += stark; // 当前面传一个参数的时候
            state.num += stark.n;
        },
        minIncrement(state) {
            state.num -= 5;
        }
    }

完整代码:

srccomponentsIncrement.vue 代码

<template> 
    <div>
        <h2>加减法计算器</h2>
        <div>
            <input type="button" value="-" @click="minHandle"/>
                <span>{{num}}</span>
            <input type="button" value="+" @click="addHandle"/>
        </div>
    </div>
</template>
<script>
    export default {
        // data(){
        //     return {
        //         // num:100
        //         num: this.$store.state.num,
        //     }
        // },
        computed:{
            num(){
                return this.$store.state.num
            }
        },
        methods:{
            addHandle(){
                // this.num += 5;
                // 点击的时候需要改变状态,提交mutation addIncrement
                // 利用$store.commit 里面 写参数相当于 mutation的函数名字
                // this.$store.commit("addIncrement",{name:"stark",age:18,n:5})
                // this.$store.commit({
                //     type:"addIncrement",
                //     n:5,
                //     age:18,
                //     name:"stark.wang"
                // })
            },
            minHandle(){
                // this.num -= 5;
                this.$store.commit("minIncrement")
                // this.$store.         
            }
        }
    }
</script>

vuex :/src/store/index.js 代码

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

let store = new Vuex.Store({
    state: {
        num: 100
    },
    mutations: {
        // 任何时候改变state的状态都通过提交 mutation 来改变
        // 里面可以定义多个函数,当触发这个函数就会改变state状态
        addIncrement(state, stark) {
            console.log(stark);
            // 接收一个state作为参数, 相当于上面的state
             // 在vuex里面接收:接收第二个参数相当于前面传过来的参数,如果多个这个就是对象,如果是一个参数,这个第二个参数payload就是前面的参数。
            // mutations设计原则是同步的
            //state.num += stark;
            state.num += stark.n;
        

        },
        minIncrement(state) {
            state.num -= 5;
        }
    }

})

export default store
vuex

来源地址:https://segmentfault.com/a/1190000011528501 版权归作者所有!

相关教程

  • mybatis传入多个参数

    需要查阅本文的基本都是需要传入多个参数的,这里记住一句话:无论你传的参数是什么样的,最后mybtis都会将你传入的转换为map的,那么既然这样,当我们要传入多个参数时,何不直接给与map类型即可,然后mapper.xml通过#{map.key}来获取值即可,这个特别适合动态搜索,或者多个参数的查询,并且可以在mapper的xml语句中通过if判断来实现若为空,则不添加查询条件, <if
  • ES2015入门系列4-参数默认值

    这个功能比较简单,但对于后端开发来说,会觉得会奇怪,参数默认值还需要特殊支持么?答案是肯定的,在ES5中, 参数是不可以指定默认值的,统一默认为 undefined, 如下代码: function say(word) { word = word || "呵呵!"; console.log(word); } console.log(say());
  • springmvc后台接收前台参数

    controller层接收前台参数 1.利用@RequestParam注解 代码: @Controller public class Login{ @RequestMapping("/login") //使用@RequestParam注解接收前台参数 public String login(@RequestParam("userName") St
  • 将函数作为参数, map函数(接收1个参数),reduce函数(接收2

    1. import math def add(x,y,f): return f(x)+f(y) print add(25,9,math.sqrt) print add(-3,-2,abs) 2. def format_name(s): return s.capitalize() print map(format_name,["adam","lisa","bart"])
  • Python入门(三)——函数,参数,参数默认值,可变参数,关键字参数,组合参数,递归函数

    一、函数的定义 函数代码块以 def 关键词开头,后接函数标识符名称和圆括号()。 任何传入参数和自变量必须放在圆括号中间。圆括号之间可以用于定义参数。 函数的第一行语句可以选择性地使用文档字符串—用于存放函数说明。 函数内容以冒号起始,并且缩进。 return [表达式] 结束函数,选择性地返回一个值给调用方。不带表达式的return相当于返回 None。
  • Vue.js学习系列二 —— vuex学习实践笔记(附DEMO)

    上次学习了vue-router的使用,让我能够在各个页面间切换,将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。 注:本文只是个人对vuex学习的一些理解,要深刻掌握还需要认真查阅官方文档。 一、基本介绍 Vuex 是一个专为 Vue.js 的SPA单页组件化应用程序开发的状态管理模式插件。由于Vue
  • 函数参数中的(数组参数和指针参数)

    数组退化 1、 数组退化的意义 2、二维数组退化 一维数组: sizeof(a) = 4 二维数组: sizeof(a) =4 sizeof(*a) = 4*3 = 12 3、等价关系 4、注意 5、小结 $(function () { $("pre.p
  • vuex基础详解

    vuex入门 安装 vuex为我们提供了两种使用方法 直接引入 vuex下载地址:https://unpkg.com/vuex@2.0.0 下载之后用< script >标签包裹引入即可 打包的模式 npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过 Vue.use() 来安装 Vuex: impor