vuex写一个简易的计算器

政吹

已于 2023-11-09 11:19:48 修改

阅读量94

点赞数

文章标签： javascript vue.js 前端

于 2023-11-09 10:20:23 首次发布

本文链接：https://blog.csdn.net/2201_75717822/article/details/134305174

版权

文章详细介绍了在Vue项目中如何使用Vuex进行状态管理，包括actions处理组件动作、mutations更新状态以及getters获取数据的方法。展示了如何在组件中调用这些方法来实现数据的增减和异步操作。

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

// index.js
import Vue from 'vue'
import Vuex from 'vuex'	// 引入Vuex
Vue.use(Vuex)	// 应用Vuex插件
const actions = {
    jia(context, value) {
        console.log("触发actions中的jia");
        context.commit("JIA", value)
    },
    jian(context, value) {
        console.log("触发actions中的jian");
        context.commit("JIAN", value)
    },
    jishujia(context, value) {
        console.log("触发actions中的jishujia");
        if (context.state.sum % 2) {
            context.commit("JIA", value)
        }
    },
    yanchi(context, value) {
        console.log("触发actions中的yanchi");
        setTimeout(() => {
            context.commit("JIA", value);
        }, 1000)
    },
}
// 准备actions——用于响应组件中的动作
const mutations = {
    JIA(state, value) {
        state.sum += value
    },
    JIAN(state, value) {
        state.sum -= value
    },
}
// 准备mutations——用于操作数据（state）
const state = {
    sum: 0,
}			// 准备state——用于存储数据
const getters = {
    bigSum() {
        return state.sum * 10
    }
}
// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters,
})

// .....vue中
<template>
  <div class="hello">
    <h1>当前的和为：{{$store.state.sum}}</h1>
    <h3>当前和的2倍:{{$store.getters.bigSum}}</h3>
    <select v-model.number="num">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="reduce">-</button>
    <button @click="oddAdd">奇数加1</button>
    <button @click="waitAdd">稍后添加</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      num: 1
      // sum: 0
    };
  },
  computed: {
    // bigSum() {
    //   return this.$store.getters.bigSum;
    // }
  },
  methods: {
    add() {
      // this.sum += this.num;
      this.$store.commit("JIA", this.num);
    },
    reduce() {
      // this.sum -= this.num;
      this.$store.commit("JIAN", this.num);
    },
    oddAdd() {
      // if (this.sum % 2 == 1) {
      //   this.sum += this.num;
      // }
      this.$store.dispatch("jishujia", this.num);
    },
    waitAdd() {
      // setTimeout(() => {
      //   this.sum += this.num;
      // }, 1000);
      this.$store.dispatch("yanchi", this.num);
    }
  }
};
</script>