手把手教你用Vuex构建可预测的单向数据流应用

2023-11-01 20:04:44

Vuex简介

Vuex是一个专为Vue.js应用程序设计的集中式状态管理库。它采用单向数据流的模式，可以方便地管理和修改应用程序的状态。Vuex的主要目标是将应用程序的状态集中管理起来，使组件能够共享和修改这些状态，从而简化应用程序的开发和维护。

Vuex的核心概念

Store ：一个包含应用程序状态的单一对象。
State ：存储在store中的数据，可以通过getters获取和修改。
Getter ：从store中获取数据的函数。
Mutation ：修改store中数据的函数。
Action ：执行异步操作并分派mutation来修改store中数据。

使用Vuex构建单向数据流应用

创建store

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

export default store

在组件中使用store

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

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

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