vue实现计数器

Vue 实现计数器的方法

使用 Vue 2 实现计数器

在 Vue 2 中，可以通过 data 属性定义计数器变量，并在方法中实现增减逻辑。

<template>
  <div>
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
}
</script>

使用 Vue 3 实现计数器

Vue 3 引入了 Composition API，可以通过 ref 或 reactive 定义响应式数据。

<template>
  <div>
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    const increment = () => {
      count.value++
    }

    const decrement = () => {
      count.value--
    }

    return {
      count,
      increment,
      decrement
    }
  }
}
</script>

使用 Vuex 管理计数器状态

对于更复杂的应用，可以使用 Vuex 来管理计数器的状态。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    },
    decrement({ commit }) {
      commit('decrement')
    }
  }
})

在组件中使用 Vuex：

<template>
  <div>
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapActions(['increment', 'decrement'])
  }
}
</script>

使用 Pinia 管理计数器状态

Pinia 是 Vue 3 推荐的状态管理库，可以更简洁地管理计数器状态。

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    }
  }
})

在组件中使用 Pinia：

<template>
  <div>
    <button @click="counter.decrement">-</button>
    <span>{{ counter.count }}</span>
    <button @click="counter.increment">+</button>
  </div>
</template>

<script>
import { useCounterStore } from '@/stores/counter'

export default {
  setup() {
    const counter = useCounterStore()

    return {
      counter
    }
  }
}
</script>

以上方法涵盖了从基础到高级的计数器实现方式，可以根据项目需求选择合适的方法。