首页 > 其他 > 详细

vue-vuex-mutations的基本使用

时间:2021-04-10 15:36:26      阅读:13      评论:0      收藏:0      [点我收藏+]

  之前说过,对state的修改必须经过mutations,而mutations中是用来定义方法的,在vue文件中通过提交某个方法来完成state的修改,比如说现在点击一个按钮,让counter+1,规范的做法如下:

  vue文件:

<template>
  <div>
    <h1>我是首页页面</h1>
    <h2>{{$store.state.counter}}</h2>
    <button @click="addition">counter+1</button>
  </div>
</template>

  methods: {
    addition(){
      this.$store.commit(increment)
    }
  }

  store下的index.js:

const store = new Vuex.Store({
  state:{
    counter: 1000 
  },
  getters: {},
  mutations: {
    increment(state,getters){
      state.counter++
    }
  },
  actions: {},
  modules: {}
})

  要调用mutations中的方法,必须通过commit的方式来提交,参数是方法的名称。还有一个注意点的是,mutations中的方法默认参数1是state对象,可拿到state中的变量,参数二是getters,可调用getters中的方法

vue-vuex-mutations的基本使用

原文:https://www.cnblogs.com/ibcdwx/p/14639907.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!