devtools和vuex mutations

时间:2021-07-14
本文章向大家介绍devtools和vuex mutations，主要包括devtools和vuex mutations使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 100
  },
  mutations: {
    countAdd(state) {
      state.count++;
    },
    countSub(state) {
      state.count--;
    }
  },
  actions: {

  },
  getters: {

  },
  modules: {

  }
})

export default store

HelloWorld.vue

<template>
  <div class="hello">
    <p>{{$store.state.count}}</p>
    <button type="button" @click="addClick">+</button>
    <button type="button" @click="subClick">-</button>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    methods: {
      addClick() {
        this.$store.commit('countAdd');
      },
      subClick() {
        this.$store.commit('countSub');
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

原文地址：https://www.cnblogs.com/zhangxuechao/p/15010118.html

随机文章
Javascript知识点必读
最近更新