vue-vuex-mutations的基本使用

  之前说过,对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){
      state.counter++
    }
  },
  actions: {},
  modules: {}
})
复制代码

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

posted @   爱编程DE文兄  阅读(1040)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示