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

一、 普通求和案例【不使用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
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1-2-3 Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}h1>
    <select name="" id="" v-model.number="n">
      <option value="1">1option>
      <option value="2">2option>
      <option value="3">3option>
    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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

二、 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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')
1
2
3
4
5
6
7
8
9
10
11
12
13

2-3-3 conponent下的Count.vue

<template>
  <div>
    <h1>当前求和为：{{ sum }}h1>
    <select name="" id="" v-model.number="n">
      <option value="1">1option>
      <option value="2">2option>
      <option value="3">3option>
    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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41