Vuex 的增删改查是如何运行的？

前端

2023-10-31 22:08:14

Vuex详解：管理Vue.js状态管理的利器

绪论
提交（Commit）和派发（Dispatch）
辅助函数：getters、mutations、actions和modules
案例演示
常见问题解答
结论

绪论

在Vue.js应用程序中，管理状态至关重要。状态包含了应用程序的当前数据和信息，对其进行有效的管理对于构建响应迅速且一致的用户体验至关重要。Vuex是一个状态管理库，它提供了一套健壮且易于使用的工具，用于管理Vue.js应用程序中的状态。

提交（Commit）和派发（Dispatch）

在Vuex中，有两种关键操作用于管理状态：提交和派发。

提交（Commit）： 提交用于触发状态变更。它接受一个字符串类型的mutation名称作为第一个参数，以及一个可选的payload对象作为第二个参数。mutation是对状态进行直接修改的函数。

this.$store.commit('increment', { amount: 10 })

派发（Dispatch）： 派发用于触发action。它接受一个字符串类型的action名称作为第一个参数，以及一个可选的payload对象作为第二个参数。action是对状态进行异步修改的函数。

this.$store.dispatch('incrementAsync', { amount: 10 })

辅助函数：getters、mutations、actions和modules

除了提交和派发，Vuex还提供了一系列辅助函数，用于更精细地管理状态：

getters： getters可以从state中派生出新的数据。它们接受一个函数作为参数，该函数将state作为参数并返回一个新值。

const getters = {
  doubleCount: state => state.count * 2
}

mutations： mutations是对state进行修改的函数。它们接受一个state对象作为第一个参数，以及一个payload对象作为第二个参数。

const mutations = {
  increment: (state, payload) => {
    state.count += payload.amount
  }
}

actions： actions是对state进行异步修改的函数。它们接受一个context对象作为第一个参数，以及一个payload对象作为第二个参数。

const actions = {
  incrementAsync: (context, payload) => {
    setTimeout(() => {
      context.commit('increment', payload)
    }, 1000)
  }
}

modules： modules可以将store拆分成多个子模块，每个子模块都有自己的state、getters、mutations和actions。

const modules = {
  counter: {
    state: {
      count: 0
    },
    getters: {
      doubleCount: state => state.count * 2
    },
    mutations: {
      increment: (state, payload) => {
        state.count += payload.amount
      }
    },
    actions: {
      incrementAsync: (context, payload) => {
        setTimeout(() => {
          context.commit('increment', payload)
        }, 1000)
      }
    }
  }
}

案例演示

让我们通过一个简单的例子来演示如何使用Vuex管理状态：

创建一个Vuex Store：

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

Vue.use(Vuex)

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

在Vue组件中使用Vuex：

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