从零开始学VUE之VueX(mutations)

mutations

通过创建store中的mutations字段 定义方法,方法第一个参数就是 state 然后调用方法修改
调用
this.$store.commit('方法名')
定义函数
import Vue from 'vue'
// 导入vuex
import Vuex from 'vuex'

// 通过vue安装vuex
Vue.use(Vuex)

/**
 * 创建store
 * @type {Store<{counter: number}>}
 */
const store = new Vuex.Store({
  // 用于定义属性
  state:{
    counter:1000
  },
  // 定义用于修改属性的函数
  mutations:{
    // 第一个参数是 state
    modifyCounter(state){
      state.counter--;
    },
    // 传递参数
    modifyCounterVal(state,val){
      state.counter += val;
    }
  }
})

export default store

调用
<template>
  <div id="app">
    <h2>访问store</h2>
    <h3>{{$store.state.counter}}</h3>
<!--    通过commit传入方法调用-->
    <button @click="$store.commit('modifyCounter')">-</button>
    <!--    传递参数-->
    <button @click="$store.commit('modifyCounterVal',5)">+5</button>
  </div>
</template>

<script>
import TabBar from "./components/tabbar/TabBar";
export default {
  name: 'App',
  components:{
    TabBar
  }
}
</script>

<style>
@import "./assets/css/base.css";
</style>

作者：彼岸舞

时间：2021\06\28

内容关于：VUE

本文属于作者原创,未经允许,禁止转发