Vuex，state、mutations、actions调用的两种方法

最新推荐文章于 2024-06-25 08:15:00 发布

biuyyyxxx

最新推荐文章于 2024-06-25 08:15:00 发布

阅读量2.9k

点赞数

本文链接：https://blog.csdn.net/qq_41026588/article/details/107358378

版权

本文介绍了Vuex中state、mutations和actions的两种调用方式。可以直接通过`this.$store`访问，或者利用辅助函数如mapState、mapMutations和mapActions将它们映射到组件的methods中，方便调用。

摘要由CSDN通过智能技术生成

state.js

export default new Vuex.Store({
   
  state: {
   
    count: 0,
    text: 'current count:'
  },
  mutations: {
   
    add1 (state) {
   
      state.count++
    },
    add2 (state, payload) {
   
      state.count += payload
    }
  }
})

直接通过this.$store.xxxxxxxx调用

<template>
  <div id="app">
    <div class="currentCount">{
   {
   this.$store.state.text}}{
   {
   this.$store.state.count}}</div>
    <button @click="handleBtnAdd1">+1</button>
  </div