【Vue基础十三】---Vuex的求和案例--map辅助函数的使用

最新推荐文章于 2023-03-13 13:02:58 发布

牛小小小婷～

最新推荐文章于 2023-03-13 13:02:58 发布

阅读量501

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hannah2233/article/details/126927220

版权

Vue 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

文章目录

一、普通求和案例【不使用vuex】

1-1 展示

在这里插入图片描述

1-2 代码

1-2-1 目录结构

在这里插入图片描述

1-2-2 App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <Count></Count>
  </div>
</template>

<script>
import Count from "./components/Count.vue";

export default {
  name: "App",
  components: {
    Count,
  },
};
</script>

1-2-3 Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <select name="" id="" v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再＋</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1,
      sum: 0,
    };
  },
  methods: {
    increment() {
      this.sum += this.n;
    },
    decrement() {
      this.sum -= this.n;
    },
    incrementOdd() {
      if (this.sum % 2 !== 0) {
        this.sum += this.n;
      }
    },
    incrementWait() {
      setTimeout(() => {
        this.sum += this.n;
      });
    },
  },
};
</script>

<style>
</style>

二、 Vuex改写求和案例

2-1 目录结构

在这里插入图片描述

2-2 结果展示

在这里插入图片描述

2-3 代码

2-3-1 App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <Count></Count>
  </div>
</template>

<script>
import Count from "./components/Count.vue";

export default {
  name: "App",
  components: {
    Count,
  },
  mounted() {
    console.log("App", this);
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

2-3-2 main.js

import Vue from 'vue'
import App from './App.vue'


// 引入store
import store from './store/index'

Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    store
}).$mount('#app')

2-3-3 conponent下的Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <select name="" id="" v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再＋</button>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { mapState, mapMutations } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1,
      // sum: 0,
    };
  },
  computed: {
    // sum() {
    //   return this.$store.state.sum;
    // },
    ...mapState(["sum"]),
  },
  methods: {
    ...mapMutations({ increment: "JIA", decrement: "JIAN" }),
    ...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }),
    // increment() {
    //   this.sum += this.n;
    // },
    // decrement() {
    //   this.sum -= this.n;
    // },
    // incrementOdd() {
    //   // if (this.sum % 2 !== 0) {
    //   //   this.sum += this.n;
    //   // }
    //   this.$store.dispatch("jiaOdd", this.n);
    // },
    // incrementWait() {
    //   // setTimeout(() => {
    //   //   this.sum += this.n;
    //   // });
    //   this.$store.dispatch("jiaWait", this.n);
    // },
  },
};
</script>

<style>
</style>

2-3-4 store下的index.js

// 该文件用于创建Vuex中最核心的store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// actions---相应组件中的动作
const actions = {
        jiaOdd(context, value) {
            if (context.state.sum % 2 !== 0) {
                context.commit('JIA', value)
            }
        },
        jiaWait(context, value) {
            setTimeout(() => {
                context.commit('JIA', value)
            }, 500)
        }
    }
    // mutations -- 操作数据(state)
const mutations = {
        JIA(state, value) {
            state.sum += value;
        },
        JIAN(state, value) {
            state.sum -= value;
        },
    }
    // state -- 存储数据
const state = {
    sum: 0,
}
const getters = {}

const store = new Vuex.Store({
    actions: actions,
    mutations,
    state,
    getters
})
export default store